并列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. 127. 126. Word Ladder *HARD* -- 单词每次变一个字母转换成另一个单词

    127. Given two words (beginWord and endWord), and a dictionary's word list, find the length of short ...

  2. 《Play for Java》学习笔记（四）Controller

    play的一大优势是可以将HTTP映射到JAVA API代码(Type-safe mapping from HTTP to an idiomatic Scala or Java API),完美的实现了 ...

  3. 《Learning Play! Framework 2》学习笔记——案例研究1（Templating System）

    注解: 这是对<Learning Play! Framework 2>第三章的学习 本章是一个显示聊天记录的项目,只有一个页面,可以自动对聊天记录进行排序.分组和显示,并整合使用了less ...

  4. jquery $post $get $

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  5. Axis2 webservice入门--开发环境搭建，概念理解

    关于webservice的概念,网上有各种解释,但是不太好懂. 可以这样理解:1.一个webservice就是一个“功能”,只是这个功能是别人写好的,被放在别人的网站上.                ...

  6. 一个关于qml插件的文章-转

    制作Qt Quick 2 Extension Plugin的几个问题-Qt 经过几天的google和爬帖,加上自己的摸索,终于把新版的Qt Quick 2制作插件的问题给弄了个明白,工作流可以建立了. ...

  7. 铁人系列 （1） uva 10385

    uva  10385 列出n-1个一元方程,对应成单峰函数,所以用三分求解即可. #include <cstdio> #include <cstring> #include & ...

  8. SQL远程创建数据库

    CREATE PROCEDURE [dbo].[p_CreateDB]   @Des_DB sysname,  @ServerName sysname=N'',  @UserName sysname= ...

  9. .NET C#使用微信公众号登录网站

    适用于:本文适用于有一定微信开发基础的用户 引言:花了300大洋申请了微信公众平台后,发现不能使用微信公众号登录网站(非微信打开)获得微信帐号.仔细研究后才发现还要再花300大洋申请微信开放平台才能接 ...

  10. [Js]JavaScript闭包和范围的快速测试

    1. if (!("a" in window)) { var a = 1; } alert(a); [分析]代码含义:如果window不包含属性a,就声明一个变量a并赋值为1 ①J ...