并列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. iOS App从点击到启动

    程序启动之前 从exec()开始 main()函数是整个程序的入口,在程序启动之前,系统会调用exec()函数.在Unix中exec和system的不同在于,system是用shell来调用程序,相当 ...

  2. 给Eclipse中hibernate.cfg.xml配置文件加提示

    在hibernate框架需要的jar包中找到hibernate3.jar,并用压缩软件打开,如图: 2 选择org文件夹--打开下一级文件夹 3 点击类型,方便找到dtd文件,下拉查看dtd文件,有两 ...

  3. [转]C#设置WinForm快捷键

    1.Alt+*(按钮快捷键)按钮快捷键也为最常用快捷键,其设置也故为简单.在大家给button.label.menuStrip等其他控件的Text属性指定名称时,在其后面加上‘&’然后在加上一 ...

  4. 快餐问题（dp好题）

    Peter最近在R市开了一家快餐店,为了招揽顾客,该快餐店准备推出一种套餐,该套餐由A个 汉堡,B个薯条和C个饮料组成.价格便宜.为了提高产量,Peter从著名的麦当劳公司引进了N条 生产线.所有的生 ...

  5. ICTCLA中科院分词工具用法（java）

    摘要:为解决中文搜索的问题,最开始使用PHP版开源的SCWS,但是处理人名和地名时,会出现截断人名地名出现错误.开始使用NLPIR分词,在分词准确性上效果要比SCWS好.本文介绍如何在windows系 ...

  6. TClientDataSet 设计期 多次New 字段问题

    第一次New几个字段后,右键菜单CreateDataSet 后来需要再New几个字段. 右键菜单,先 ClearData(不这样,会报 打开的数据集不能执行 这个New字段的操作),然后在 字段编辑器 ...

  7. IT公司100题-18-圆圈中最后剩下的数字

    问题描述: n个数字(下标为0, 1, …, n-1)形成一个圆圈,从数字0开始,每次从这个圆圈中删除第m个数字(当前数字从1开始计数).当一个数字被删除后,从被删除数字的下一个数字开始计数,继续删除 ...

  8. DotNetBar v12.5.0.2 Fully Cracked

    更新信息: http://www.devcomponents.com/customeronly/releasenotes.asp?p=dnbwf&v=12.5.0.2 如果遇到破解问题可以与我 ...

  9. VMware-workstation-full-10.0.1-1379776 CN

    从V10版本开始,VMware Workstation 官方自带简体中文了,以后大家不需要汉化啦! 今天,VMware Workstation 10.0.1正式发布,版本号为Build 1379776 ...

  10. Format a Hard Drive in Csharp C#格式化总结

    using System; using System.Diagnostics; using System.IO; using System.Linq; using System.Management; ...