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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

JS-百钱买百鸡案例-for循环制作

2985
来自专栏牛肉圆粉不加葱

ResourceManager HA无法连接Spark TrackUi现象解决方案

在对ResourceManager做了基于Zookeeper的HA后, 在YARN集群上执行Spark application后, 打开Spark Applic...

732
来自专栏Jack-Cui

第五天、百元买百鸡

中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买白鸡问题”,鸡翁一,值钱五,鸡母一,值钱三,鸡雏三,值钱一,百钱买白鸡,问翁、母、雏各几何? C...

1920
来自专栏小樱的经验随笔

线性表的顺序存储结构的实现及其应用(C/C++实现)

存档--- 1 #include <stdio.h> 2 #include <stdlib.h> 3 typedef int ElemType; 4 #...

2694
来自专栏数据结构与算法

2106. [NOIP2015] 斗地主

2106. [NOIP2015] 斗地主 ★★★☆   输入文件:landlords.in   输出文件:landlords.out 简单对比 时间限制:...

3609
来自专栏zingpLiu

Linux用户信息查询

第一行显示当前时间,开机(up)多久,几个用户在系统上的平均负载等; 第二行是各个项目(列名)的说明; 第三行以后,每行代表一个用户。如上,root登录,并取得...

713
来自专栏python百例

114-百鸡百钱问题

我国古代数学家张丘建在《算经》一书中提出的数学问题:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。百钱买百鸡,问鸡翁、鸡母、鸡雏各几何? 思路: 1、答案不只一...

832
来自专栏盟主来了

淘宝的npaliedit在mb下会崩溃的问题解决了

1415
来自专栏QQ音乐技术团队的专栏

ContentProvider 引发闪退之谜

CP 在跨进程调用的场景中,作为数据提供的进程称作 Server 进程,请求数据的进程称作 Client 进程。当我们享受它在跨进程场景下带来的便利时,可能未曾...

5170
来自专栏绿巨人专栏

读书笔记: 博弈论导论 - 09 - 完整信息的动态博弈 多阶段博弈

41210

扫码关注云+社区