并列div自动等高

方法一:css控制

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>完美的DIV三行三列自适应高度布局</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:12px;
}
.header {
width:100%;
height:50px;
background:#EEE;
border-bottom:1px solid #000;
}
.colmask {
position:relative;
clear:both;
width:100%;
overflow:hidden;
}
.colright, .colmid, .colleft {
float:left;
width:100%;
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
overflow:hidden;
}
.threecol {
background:#BBB;
}
.threecol .colmid {
right:20%;
background:#CCC;
}
.threecol .colleft {
right:60%;
background:#DDD;
}
.threecol .col1 {
width:58%;
left:101%;
}
.threecol .col2 {
width:18%;
left:23%;
}
.threecol .col3 {
width:18%;
left:85%;
}
.footer {
clear:both;
width:100%;
height:50px;
background:#EEE;
border-top:1px solid #000;
}
</style>
</head>
<body>
<div class="header"> 这里是头部 </div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p> </div>
<div class="col2"> 这里是左栏 </div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer"> 这里是底部 </div>
</body>
</html>

方法二:JS控制

function SetSameHeight(obj1,obj2)
{
var h1 = $(obj1).outerHeight(); //获取对象1的高度
var h2 = $(obj2).outerHeight(); //获取对象2高度
var mh = Math.max( h1, h2); //比较一下
$(obj1).height(mh);
$(obj2).height(mh);
}
在页面用调用:
jQuery(document).ready(function($) { SetSameHeight(".left",".line");
SetSameHeight(".right_main",".line");//如果有3个div 就加这一行代码,再适应一次. }

  参考博客:http://www.jianshu.com/p/93e61ec8f354

并列div自动等高的更多相关文章

  1. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  3. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  4. 第4天:JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  5. div 自动全屏高度

    最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%

  6. Redis主从配置及通过Keepalived实现Redis自动切换高可用

    Redis主从配置及通过Keepalived实现Redis自动切换高可用 [日期:2014-07-23] 来源:Linux社区  作者:fuquanjun [字体:大 中 小]   一:环境介绍: M ...

  7. JavaScript实现div宽、高自动缓慢拉伸

    最近打算实现一个带有滤镜效果的地自动拉伸图片.发现使用css3浏览器兼容性得需要特别关注.这里我使用js实现了一个div边框自动拉伸和缩小.源码如下: <!DOCTYPE html>< ...

  8. 固定高度div,随内容自动变高css定义方法

    *{ font-size:12px; margin:0; padding:0;}方法1:#testBox{border:1px solid #cccccc;padding:5px;width:220p ...

  9. 两个div并列居中显示——当display:inline;时,div的宽高不起作用即两个div重叠显示

    解决办法: 将display设置为:inline-block

随机推荐

  1. js字符串处理

    1.获取字符串实际长度 var jmz = {}; function strlen(str) { ///<summary>获得字符串实际长度,中文2,英文1</summary> ...

  2. AppSettings和ConnectionStrings的区别

    AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...

  3. SAP 质检使用非物料基本单位

    今天也是奇葩了,物料A基本单位平方米,转化单位卷,销售和采购是按照平方米来采购,但是质检的需要按照平方米来做抽样检验.... 程序开发的: 修改该物料的工序基本单位为卷,再修改检验计划基本单位为卷 程 ...

  4. JavaScript学习——判断数据类型总结(转)

    一.JS中的数据类型 1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) ...

  5. Singleton、MultiThread、Lib——实现单实例无锁多线程安全API

        前阵子写静态lib导出单实例多线程安全API时,出现了CRITICAL_SECTION初始化太晚的问题,之后查看了错误的资料,引导向了错误的理解,以至于今天凌晨看到另一份代码,也不多想的以为s ...

  6. HDU 3076 ssworld VS DDD 概率dp,无穷级数,oj错误题目 难度:2

    http://acm.hdu.edu.cn/showproblem.php?pid=3076 不可思议的题目,总之血量越少胜率越高,所以读取时把两人的血量交换一下 明显每一轮的胜率和负率都是固定的,所 ...

  7. hdu 4616 Game

    http://acm.hdu.edu.cn/showproblem.php?pid=4616 要记录各种状态的段  a[2][4] a[0][j]表示以trap为起点一共有j个trap的最优值 a[1 ...

  8. 二模 (1) day2

    第一题: 题目大意: N层楼,K个人,M个箱子在1楼,给出K个人的初始状态(在第几楼,正在向上走还是向下走,向上走的人手里已经有箱子),每次移动一层楼,求把所有箱子(手里拿着的不算在M里)全部搬到顶楼 ...

  9. Android事件处理--读书笔记

    2013-12-28 17:57:17 1. Android提供了两种方式的事件处理:基于回调和基于监听的事件处理: 1.1 对基于监听的事件处理而言,主要做法是为Android界面组件绑定特定的事件 ...

  10. C-union的使用

    union有两个作用: 1,节约空间,如果一个struct存在两个互斥的变量,则可以把这个struct变成union 2,将同一个内存作为多种解释 代码: #include <iostream& ...