并列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. 接口（C# 参考）

    接口只包含方法.属性.事件或索引器的签名. 实现接口的类或结构必须实现接口定义中指定的接口成员. 在下面的示例,类 ImplementationClass必须实现一个不具有参数并返回 void 的名为 ...

  2. 转：怎样在VMware ESXi上 克隆虚拟机

    Cloning virtual machines on VMware ESXi 翻译自http://www.dedoimedo.com/computers/vmware-esxi-clone-mach ...

  3. 各种浏览器hack

    Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...

  4. 转：PHP Composer 管理工具的介绍 这个相对清晰点

    转自:http://www.aichengxu.com/view/14872 一.PHP的一些臭历史 Dependency Manager For PHP,Composer.在Composer还没诞生 ...

  5. 【转】数据库范式（1NF 2NF 3NF BCNF）详解一

    以下内容转自:http://jacki6.iteye.com/blog/774866 --------------------------------------------分割线---------- ...

  6. JBOss启动只能在本机访问的解决办法

    环境CentOS6.4_X64 JBoss:5.1.2 eap 启动:JBOSS_HOME/bin/run.sh 在本机可以通过http://localhost:8080访问,而其他机器无论是通过机器 ...

  7. 介绍开源的.net通信框架NetworkComms

    Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  开源地址是:https://github.com/MarcFletcher/ ...

  8. TaskTracker节点上的内存管理器

    Hadoop平台的最大优势就是充分地利用了廉价的PC机,这也就使得集群中的工作节点存在一个重要的问题——节点所在的PC机内存资源有限(这里所说的工作节点指的是TaskTracker节点),执行任务时常 ...

  9. sql删除多余重复的数据只保留一条

    delete from people where   peopleName in (select peopleName    from people group by peopleName      ...

  10. C#.NET SQL数据库备份与还原解决方案

    C#.NET SQL数据库备份与还原解决方案http://www.csframework.com/archive/1/arc-1-20110924-1841.htm 开发框架V2.2(快速开发版)系统 ...