黑暗模式 

2014年4月24日

解决并列两个DIV底部对齐

在实际的开发中,又一次遇到垂直并列的两个DIV,同时两个DIV中内容的多少不确定,这就造成这两个DIV底部对齐的困难。本来,这个用CSS是可以解决的,但是太麻烦了。通过尝试,本次成功用JS来解决,故把代码放上来以备用。

代码如下:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用JS实现两个DIV底部对齐</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
/*<![CDATA[*/
<!--
#left{float:left;width:300px;border:1px solid #ccc;padding:0 10px;}
#right{float:right;width:300px;border:1px solid #ccc;padding:0 10px;}
-->
/*]]>*/
</style>
<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>
</head>
<body>
<div id="left"><p>这是左边的层,里面的内容可以多,也可以少</p></div>
<div id="right"><p>这是右边的层,不管这两个层谁的长, JS都可以控制它们始终底部对齐。</p></div>
</body>
</html>

需要注意的是两个层的CSS应用ID选择器,否则JS无效。至于DIV的样式,自己写CSS来完成,本次为了说明,只对两个DIV加了边框。

没有评论:

发表评论