使用display:table使两栏布局高度相等
两栏布局大家应该经常用了，但是遇到坑爹的要两栏的高度对齐的话要怎么办呢？
<!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使两栏布局高度相等的更多相关文章
- 使用display:flex;实现两栏布局和三栏布局
一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...
- CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- CSS 实现：两栏布局（一边固定，一边自适应）
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- css布局 - 工作中常见的两栏布局案例及分析
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
随机推荐
- Making training mini-batches
Here is where we'll make our mini-batches for training. Remember that we want our batches to be mult ...
- jquery slibings选取同级其他元素
jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始. <script type="text/javascript"&g ...
- MySQL具体解释（20）-----------数据库备份和还原
数据备份: 使用mysqldump命令备份 mysqldump命令能够讲数据库中的数据备份成一个文本文件. 表结果和表中的数据将存储在生成的文本中.mysqldump的工作原理非常easy. 他先查出 ...
- Linux学习笔记（6）磁盘分区（LVM）
1.逻辑管理技术LVM的概念 1.1 LVM ,逻辑卷管理,以便扩展管理盘符. PV:物理卷 VG:卷组 LV:逻辑卷 PE(physical Extend):物理扩展(默认4M),就是我们逻辑卷管理 ...
- R语言seq()函数用法
1.seq() 用来生成一组数字的函数. Usage: ## Default S3 method:seq(from = 1, to = 1, by = ((to - from)/(length.out ...
- 【转】XML的几种读写
XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖于内 ...
- Java源码解释之Integer.bitCount
Java中的Integer.bitCount(i)的返回值是i的二进制表示中1的个数.源码如下: public static int bitCount(int i) { // HD, Figure 5 ...
- c# Datagridview 设置单位格为编辑状态（in editing mode）
private void dataGridView1_KeyDown(object sender, KeyEventArgs e) { if (e.KeyCode == Keys.Tab && ...
- [笔记]Go语言实现同一结构体适配多种消息源
问题: 提供天气信息的网站有很多,每家的数据及格式都不同,为了适配各种不同的天气接口,写了如下程序. 代码如下: package main import ( "encoding/json&q ...
- 用python实现一个计算器
import re def atom_cal(exp): # 计算乘除法 if '*' in exp: a,b = exp.split('*') return str(float(a) * float ...