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

 <!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. 解决phantomjs输出中文乱码

    解决phantomjs输出中文乱码,可以在js文件里添加如下语句: phantom.outputEncoding="gb2312"; // 解决输出乱码

  2. Scala学习之Tuple、Map、Array

    1.Tuple Tuple的中文意思是元组,它的定义是不需要方法. 例如:val tup=(25,”Tuple”,”Map”,”Array”). 值得注意的是,Tuple在进行索引的时候,与我们平时所 ...

  3. 巨蟒python全栈开发-第19天 核能来袭-反射

    一.今日主要内容 1.isinstance,type,issubclass A.isinstance: 判断你给对象是否是xx类型的. (向上判断) B.type: 返回xxx对象的数据类型 C.is ...

  4. windows 全角 怎么切换到半角

    windows 全角 怎么切换到半角 :shift+空格键

  5. pytho创建二维码简单版

    pytho创建二维码简单版 import qrcode aa = qrcode.make("https://github.com/phygerr/") aa.save('C:\Us ...

  6. Python的3个方法：静态方法(staticmethod),类方法(classmethod)和实例方法

    Python的方法主要有3个,即静态方法(staticmethod),类方法(classmethod)和实例方法,如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  7. Unity3d依赖于平台的编译

    Unity的这一功能被命名为"依赖于平台的编译". 这包括了一些预编译处理指令,让你能够专门的针对不同的平台分开编译和运行一段代码. 此外,你能够在编辑器下运行一些代码用于測试而不 ...

  8. 部署Node.js的应用

    原创:作者 mashihua 最近Node.js很火,让很多的前端看到了可以直接从前端写到后端的希望.但是每次部署一个Node.js的应用却让前端苦恼不已.每次登陆服务器,用自己不熟悉的方式从版本控制 ...

  9. 001-Bitcoin比特币与BlockChain区块链技术

    一.比特币历史 2008 年 10 月 31 日,一个网名叫中本聪(英文翻译过来滴)的家伙发布比特币唯一的白皮书:<Bitcoin:A Peer-to-PeerElectronic Cash S ...

  10. Android studio怎么修改文件名

    选中需要重新命名的文件 点击Android studio菜单中列表中的Refactor的选项 选择下拉菜单中的“rename”的选项 弹出rename的选项框,在输入框中输入需要重新的命名的名称. 点 ...