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

相关文章

扫码关注云+社区