并列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");//如果有３个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. SQL批量删除与批量插入

    批量删除: DELETE FROM MyTable WHERE ID IN (1,2); 批量插入: INSERT INTO MyTable(ID,NAME) VALUES(1,'123');INSE ...

  2. Objective-C：Foundation框架-常用类-NSArray

    NSArray是用来存储对象的有序列表(NSSet是没有顺序的),它是不可变的.NSArray不能存储C语言中的基本数据类型,如int\float\enum\struct等,也不能存储nil.其用法如 ...

  3. BZOJ2492 Revenge of Fibonacci

    首先我们高精度加法算出前10W个数... 然后把所有的前40位搞出来建成trie树,于是就变成了模板题了... 说一下...这题要是直接建出来son[tot][10]会MLE...所以...建trie ...

  4. select option居中显示

    <style> .ch-select{ padding:0px;} .ch-select input[type=text]{ width:100%; position:relative; ...

  5. [整理]Svn常见问题汇总。

    1.’.’ is not a working copy.Can’t open file‘.svn/entries’: 系统找不到指定的路径. 解答:原因是输入的访问路径不正确,如svn://192.1 ...

  6. 在Android应用中使用OpenGL

    Android为OpenGL  ES支持提供了GLSurfaceView组件,这个组件用于显示3D图形.GLSurfaceView本身并不提供绘制3D图形的功能,而是由GLSurfaceView.Re ...

  7. Blackhat EU 2013 黑客大会（Full Schedule for Black Hat USA 2013）

    大会文档下载:https://www.blackhat.com/eu-13/archives.html 此次BH EU 议题整体较水,涉及系统安全.移动安全.网络传输安全.WEB安全.游戏安全等.下面 ...

  8. CNAPS Code 查询（招商银行）

    招商银行的妹子实在太傻了,根本不知道什么是CNAPS Code.联行号,完全答非所问. 最后还是自己搞定了,如图: 最后再看看招行人员的英语水平,真是不知道什么是东西:

  9. CF 103E Buying Sets 最大权闭合子图,匹配 难度:4

    http://codeforces.com/problemset/problem/103/E 这道题首先一看就很像是最大权闭合子图,但是我们可以认为现在有两种点,数字和集合点,我们需要消除数字点的影响 ...

  10. POJ 3225 Help with Intervals

    U:把区间[l,r]覆盖成1I:把[0,l-1][r+1,∞]覆盖成0D:把区间[l,r]覆盖成0C:把[0,l-1][r+1,∞]覆盖成0 , 且[l,r]区间0/1互换(即异或)S:[l,r]区间 ...