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

 <!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. windows平台 - 0基础学习node.js（一）

    首先得明白node.js做什么用的: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Nod ...

  2. 【BZOJ4631】踩气球 链表+线段树+堆

    [BZOJ4631]踩气球 Description 六一儿童节到了, SHUXK 被迫陪着M个熊孩子玩一个无聊的游戏:有N个盒子从左到右排成一排,第i个盒子里装着Ai个气球. SHUXK 要进行Q次操 ...

  3. CSS 伪元素 使用参考

    伪元素可以做得事情是非常多的,详情大家可以参考这里 大放异彩的伪元素——可以做什么? 本篇主要讲两个伪元素:before和:after的几个要点: 1.:before和:after是加在元素的里面,也 ...

  4. Vue.js_判断与循环

    一.判断,条件语句 1.一元表达式判断 {{ ok ? 'show' : 'hide' }} 2.if判断 v-if='ok' <ol id="ifGrammar"> ...

  5. HDU 1232 畅通工程（Kruskal）

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  6. delphi ,1）控件根据窗口大小，一直居中显示 2）显示最大化最小化按钮控件

    一.控件根据窗口大小,一直居中显示 1)onResize:当窗体尺寸改变时发生 例子:如何使控件随窗口的放大和缩小动态改变自己的大小,使控件“保存.返回”在窗口变大变小中随着变. 在Panel调用 p ...

  7. 修改/etc/hosts 云服务器 没有做外网转内网的优化

    [root@a mapReduceLog]# scp /data/visitlog/* root@d:/data/mapReduceVisitorLog/a/root@d's password:vis ...

  8. 面向对象 - 1.软件开发/2.异常处理/3.try...except的详细用法

    1.软件开发 软件的开发其实一整套规范,我们所学的只是其中的一小部分,一个完整的开发过程,需要明确每个阶段的任务,在保证一个阶段正确的前提下再进行下一个阶段的工作,称之为软件工程 面向对象的软件工程包 ...

  9. Leetcode 之 Set Mismatch

    645. Set Mismatch 1.Problem The set S originally contains numbers from 1 to n. But unfortunately, du ...

  10. always on 之路实践（未完）

    概念及参考:http://www.mssqlmct.cn/dba/?post=97 准备:利用vmvare workstation12 克隆了4台windows server 2008 datacen ...