并列div自动等高

时间：2022-08-28 16:57:35

并列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&plus;css&colon;两个div并排等高 &lpar;table-cell&rpar;

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

  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>&lt ...

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

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

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

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

随机推荐

  1. BSD License

    BSD开源协议(original BSD license.FreeBSD license.Original BSD license) BSD开源协议是一个给于使用者很大*的协议.基本上使用者可以”为 ...

  2. 【python】原始字符创

    原始字符串语法在字符串前加"r" 如 tem=r"h\c\d\n"print(tem) 结果:h\c\d\n 注意:字符串结尾不能是\,否则报错,应对措施将\单 ...

  3. 【动态规划】POJ 1161 &amp&semi; ZOJ1463 &amp&semi; XMU 1033 Brackets sequence

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1033 http://poj.org/problem?id=1141 ZOJ目前挂了. ...

  4. Java多态（二）

    public class ExtendsTest { public static void main(String[] args) { A a1 = new A(); A a2 = new B(); ...

  5. 【转】RAID 简介

    原文:http://wiki.dzsc.com/info/4972.html RAID 的英文全称为 Redundant Array of Inexpensive(或 Independent) Dis ...

  6. freemarker基本数据类型

    freemarker基本数据类型 1.基本数据类型 (1)字符串 (2)数字 (3)布尔值 (4)日期 2.展示示例 <html> <head> <meta http-e ...

  7. &OpenCurlyDoubleQuote;短路求值（Short-Circuit Evaluation）

        // 逻辑与和逻辑或操作符总是先计算其做操作数,只有在仅靠左操作数的值无法确定该逻辑表达式的结果时,才会求解其右操作数. function aa() { if (null) { console ...

  8. Spring Security（十七）：5&period;8 Method Security

    From version 2.0 onwards Spring Security has improved support substantially for adding security to y ...

  9. Scrum 冲刺博客集合

    Day1 博客链接:http://www.cnblogs.com/coolgirls/p/8869839.html Day2 博客链接:http://www.cnblogs.com/coolgirls ...

  10. Google 是如何收集我们的个人数据的

    简评:还有其他公司比 Facebook 更能收集我们的数据么?大概,可能,没准是谷歌.(文末彩蛋) 最近 Facebook 已经因为收集个人数据而站在了聚光灯前,它收集用户数据并因此获利. 但是要知道 ...

相关文章