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

 <!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. db2 相关命令

    db2ilist  ---列出主机所有实例 db2icrt  instanceName   ---创建实例名为instanceName的实例 db2idrop  instanceName   ---删 ...

  2. Instagram发布动态自动裁剪照片说明

    发布Ins时,照片总是被截取一截,感觉很不爽...然后就仔细了解了Ins是如何限制图片大小的. 官方帮助说的很清楚,https://help.instagram.com/163182164042672 ...

  3. bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...

  4. REDO 的内容：改变向量

    REDO 的内容 ---改变向量 redo的内容并不是sql语句,他是放的一些改变,叫改变向量. 数据库恢复的时候并不是执行sql语句,而是一个物理的过程,是一个数据块的覆盖.是改变数据块的大小. 可 ...

  5. iOS核心动画详解（CABasicAnimation）

    前言 上一篇已经介绍了核心动画在UI渲染中的位置和基本概念,但是没有具体介绍CAAnimation子类的用法,本文将介绍CABasicAnimation及其子类CASpringAnimation的用法 ...

  6. XML 解析之 dom4j 解析器

    dom4j 的使用需要导入 jar 包, 包括: dom4j-1.6.1 和 jaxen-1.1-beta 步骤: 在项目目录下,"Folder" 创建一个 lib 文件夹 复制 ...

  7. pandas 如何判断指定列是否(全部)为NaN（空值）

    判断某列是否有NaN df['$open'].isnull().any() # 判断open这一列列是否有 NaN 判断某列是否全部为NaN df['$open'].isnull().all() # ...

  8. CG group

    Linux CGroup全称Linux Control Group, 是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等).这个项目最早是由Google ...

  9. ServiceModel 元数据实用工具 (Svcutil.exe)

    ServiceModel 元数据实用工具用于依据元数据文档生成服务模型代码,以及依据服务模型代码生成元数据文档 一.SvcUtil.exe ServiceModel 元数据实用工具可在 Windows ...

  10. PL/SQL编程—包

    1.PLSQL 中的包就相当于java中的package,主要好处有(1)防止命名污染,(2)功能统一,(3)允许重载,(4)可以隐藏核心代码,(5)最重要的就是断开依赖链. 2.对于一个程序需要大量 ...