两栏布局大家应该经常用了，但是遇到坑爹的要两栏的高度对齐的话要怎么办呢？

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Examples</title>

 <style type="text/css">

     *{

         margin:0;

         padding:0;

         border: 0 none;

     }

     #main{

         width:100%;

     }

     div.sideBar{

         width:70%;

         height:100%;

         background:#CD2020;

         float:left;

     }

     div.content{

         width:28%;

         background:#2054CD;

         height:100%;

         float:right;

     }

     div.clear{

         clear: both;

         width:100%;

         height:1px;

     }

 </style>

 <link href="" rel="stylesheet">

 </head>

 <body>

     <div id="main">

         <div class="sideBar">

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

         </div>

         <div class="content">

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

         </div>

         <div class="clear"></div>

     </div>

 </body>

 </html>

就像这样的，左边的高度和右边的高度明显不一样，但是我想要给右边的一点颜色，然后让它看起来"cool"一点怎么办呢？

以前想的是用JS获取左边元素高度然后设置右边元素高度为相同值，现在有display:table这个东西就很好解决了。

还是那个基本的思想，行为和样式要分离的思想。所以我们用display:block解决它吧。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Examples</title>

 <style type="text/css">

     *{

         margin:0;

         padding:0;

         border: 0 none;

     }

     #main{

         width:100%;

         display: table;

     }

     div.sideBar{

         width:70%;

         height:100%;

         background:#CD2020;

         display: table-cell;

     }

     div.content{

         width:28%;

         background:#2054CD;

         height:100%;

         display: table-cell;

     }

     div.clear{

         clear: both;

         width:100%;

         height:1px;

     }

 </style>

 <link href="" rel="stylesheet">

 </head>

 <body>

     <div id="main">

         <div class="sideBar">

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

         </div>

         <div class="content">

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

             <p>这是测试</p>

         </div>

     </div>

 </body>

 </html>

是的，我们连float都不用加就可以轻松实现等高度的两栏布局了。虽然有点倒退回表格布局的嫌疑 ——！！ 。

但是问题也来了，IE8+才支持display:table这个属性--!!

不过所幸现在IE6的市场份额越来越少了，IE8+的市场份额也越来越多了，或许这种方式的布局后面会比较流行，原因就是简单粗暴。

使用display:table使两栏布局高度相等的更多相关文章

  1. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...

  2. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  3. CSS实现两栏布局

    写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...

  4. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  5. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  6. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  7. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  8. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  9. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

随机推荐

  1. 【转】 JS实现HTML标签转义及反转义

    原文地址:http://blog.600km.xyz/2015/12/15/js-encode-html-tags/ 简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中 ...

  2. 170214、mybatis一级和二级缓存

    mybatis一级缓存是指在内存中开辟一块区域,用来保存用户对数据库的操作信息(sql)和数据库返回的数据,如果下一次用户再执行相同的请求, 那么直接从内存中读数数据而不是从数据库读取. 其中数据的生 ...

  3. 求其中同一个主叫号码的两次通话之间间隔大于10秒的通话记录ID

    求其中同一个主叫号码的两次通话之间间隔大于10秒的通话记录ID 例如:6,7,8,9,10条记录均符合 ID 主叫号码 被叫号码      通话起始时间            通话结束时间       ...

  4. Parrot Linux国内源

    China USTC (University of Science and Technology of China and USTCLUG) - Hefei University 1 Gbps for ...

  5. 第5章 IDA Pro

    5.1 加载一个可执行文件 默认情况下IDA Pro的反汇编代码中不包含PE头或资源节,可以手动指定加载. 5.2 IDA Pro接口 5.2.1 反汇编窗口模式 二进制模式/图形模式: 图形模式:红 ...

  6. eclipse中jar file与runnable jar file的区别

    直接运行 .class的方法     java  -cp .  com.network.Chat  , 不用加.class后缀 从eclipse中export 的jar file,仅仅是把.class ...

  7. 转！！关于java类初始化顺序

    原文地址:http://www.cnblogs.com/luckygxf/p/4796955.html 1.没有继承 静态变量->静态初始化块->变量->变量初始化块->构造方 ...

  8. 神经网络中的数据预处理方法 Data Preprocessing

    0.Principal component analysis (PCA) Principal component analysis (PCA) is a statistical procedure t ...

  9. Open Source VOIP applications, both clients and servers (开源sip server & sip client 和开发库)

    SIP Proxies SBO SIP Proxy Bypass All types of Internet Firewall JAIN-SIP Proxy Mini-SIP-Proxy A very ...

  10. HDU1421:搬寝室(线性dp)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1421 又是一道,没有思想的题,看了题解,我发现我的dp题几乎都看了题解,我总是想不好状态转移方程,汗颜,以 ...