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

 <!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. 【BZOJ3379】[Usaco2004 Open]Turning in Homework 交作业 DP

    [BZOJ3379][Usaco2004 Open]Turning in Homework 交作业 Description     贝茜有C(1≤C≤1000)门科目的作业要上交,之后她要去坐巴士和奶 ...

  2. 用express创建网站出现"$ DEBUG=microbog ./bin/www"的提示

    第一次用express框架创建网站,指令为:“express -t ejs microblog”,如下图 指令运行完成后,出现如图框中的提示,不知道什么意思,运行:“node app.js”来启动服务 ...

  3. Servlet——总结

    当我们学完了JavaSe部分的知识之后,如果我们往Web方面发展和学习的话,我们将会接触到一个非常重要的web技术——Servlet.在说明Servlet的配置之前我们先来了通过下面的请求响应图解一下 ...

  4. ssh访问跳过RSA key"yes/no"验证

    通常我们再批量配置多台机器的时候经常出现通过ssh批量登录机器提示 RSA key fingerprint is ::a6:b1:c9:d7:b8::c1:::8e:f5::2b:8b. Are yo ...

  5. 决策树ID3算法python实现 -- 《机器学习实战》

    from math import log import numpy as np import matplotlib.pyplot as plt import operator #计算给定数据集的香农熵 ...

  6. Tunneling protocol

    w https://en.wikipedia.org/wiki/Tunneling_protocol

  7. nodejs使用——以elasticsearch-exporter为例

    安装nodejs: yum install nodejs 运行node命令查看是否安装成功: 可以看到成功进入命令行,安装成功. node命令前面要加点,使用 .help 查看有哪些命令: 使用.ex ...

  8. git 添加远程仓库后无法push

    push的时候提示fatal: refusing to merge unrelated histories   假如我们的源是origin,分支是master,那么我们 需要这样写git pull o ...

  9. java 遍历map的方法

    package com.jackey.topic; import java.util.ArrayList;import java.util.HashMap;import java.util.Itera ...

  10. CDN 环境下获取用户IP方法

    CDN 环境下获取用户IP方法 1 cdn 自定义header头的X-Real-IP,在后端使用$http_x_real_ip获得 proxy_set_header X-Real-IP $remote ...