jQuery两列div等高显示代码下载

本章节介绍一下如何让两列div始终保持高度一致，一般情况下，高度一致的话比较美观。
代码如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" />
<title>如何让两列div等高-51前端</title>
<style type="text/css">
#left{
  float:left;
  background-color:blue;
  width:50px;
}
#right{
  float:right;
  background-color:red;
  width:50px;
}
</style>
<script src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var heightLeft= $("#left").height(); 
  var heightRight= $("#right").height(); 
  if (heightLeft > heightRight) { 
    $("#right").height(heightLeft); 
  } 
  else { 
    $("#left").height(heightRight); 
  } 
}) 
</script> 
</head>
<body>
<div style="width:300px;"> 
<div id="left">51前端欢迎您</div> 
<div id="right">只有奋斗才会有美好的明天</div> 
</div> 
</body>
</html>

代码描述：jQuery两列div等高显示。jQuery两列div等高显示代码下载

下载全部收藏

120 160

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册