JS的左右两列自动拉伸对齐

前边发了个后遗症比较多的自动对齐,现在发个JS的高度自动对齐代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>高度对齐</title>

<script type="text/javascript">

function alignHeight(eleA,eleB){

if(!document.getElementById(eleA)){return false;}

if(!document.getElementById(eleB)){return false;}

var heightA = document.getElementById(eleA).clientHeight;

var heightB = document.getElementById(eleB).clientHeight;

if(heightA > heightB){

document.getElementById(eleB).style.height = heightA + "px";

document.getElementById(eleA).style.height = heightA + "px";

}else{

document.getElementById(eleA).style.height = heightB + "px";

document.getElementById(eleB).style.height = heightB + "px";

}

}

window.onload =

function z_align(){

alignHeight("left","right"); //只需将需要对齐的两个模块的id写在此处即可。

//alignHeight("AAA","BBB") 可依此连续多组。

}

</script>

<style type="text/css">

#main{width:400px}

div{border:1px solid #666;padding:10px;}

#left{float:left;width:150px}

#right{float:right;width:180px}

</style>

</head>

<body>

<div id="main">

<div id="left">高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高</div>

<div id="right">我自动跟他对齐</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

ClassMetadataReadingVisitor has interface org.springframework.asm.ClassVisitor as super class

ClassMetadataReadingVisitor has interface org.springframework.asm.ClassVisitor a...

1005
来自专栏lonelydawn的前端猿区

前端验证码绘制(canvas)

一切尽在代码中 js文件 /** * canvas绘制动画浮动验证码 * code by lonelydawn 2017-04-10 */ var c...

2947
来自专栏跟着阿笨一起玩NET

从sql server 中读取二进制图片

621
来自专栏技术之路

QTableView 添加按钮

这里说一下怎么在QTableView添加一个按钮 效果是点击button弹出一个对话框。 ? 看一下ButtonDelegate的代码 #ifndef BUTT...

2306
来自专栏算法+

3D Lut 电影级调色算法 附完整C代码

长话短说,3d lut(全称 : 3D Lookup table )它是通过建立一个颜色映射表,对图像的色调进行重调的算法。

85010
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(三):基本模块调用

搞定基本的函数之后,开始鼓捣SAS里面的模型。也就是说,要开始写PROC了。说实话,越学SAS,越觉得SAS像Stata...无论是从输出的样式,还是语法。好不...

3095
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项。既然要绑定,就先来几个实体类: ? 上面是类图,各类的代码如下:  Business...

2828
来自专栏c#开发者

在DataGrid中选择,确认,删除多行复选框列表

在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Mul...

3707
来自专栏Android知识点总结

看得见的数据结构Android版之开篇前言

752
来自专栏杂烩

spring+quartz集成启动报错 原

792

扫码关注云+社区