使用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 ...
随机推荐
- form.submit 方法 并不会触发 form.onsubmit 事件
做表单的时候发现一个奇怪的地方,总结下: form.submit 方法 并不会触发 form.onsubmit 事件,看代码: <body> <div class="con ...
- Less-mixin函数基础二
//mixin函数 基础使用方法 --包含选择器,example: .test(){ &:hover{ border:1px solid red; } } button{ .test; } / ...
- 【IDEA】单元测试：项目中引入JUnit测试框架+Mock简单了解
一.Junit 使用和说明: 参考:单元测试第三弹--使用JUnit进行单元测试-HollisChuang's Blog http://www.hollischuang.com/archives/17 ...
- 移动APP自动化测试框架
简介 移动APP的UI自动化测试长久以来一直是一个难点,难点在于UI的”变”, 变化导致自动化用例的大量维护.从分层测试的角度,自动化测试应该逐层进行.最大量实现自动化测试的应该是单元测试,最容易实现 ...
- Understanding Tensorflow using Go
原文: https://pgaleone.eu/tensorflow/go/2017/05/29/understanding-tensorflow-using-go/ Tensorflow is no ...
- FineReport---过滤条件
1.过滤条件,获取值 该单元格的值 ,是当team为A,content为产量 数据列过滤条件常用处理:nofilter.left.and ,or 2.单元格值等查询条件区域的内容 所选你应该指的就是日 ...
- access variables from the global scope 在全局范围内访问变量的2种方法
w http://php.net/manual/zh/language.variables.scope.php http://php.net/manual/en/language.variables. ...
- openssl update--centos 6.5
cd /usr/local/src #wget http://www.openssl.org/source/openssl-1.0.1h.tar.gz #tar -zxvf openssl-1.0.1 ...
- Python glob使用
http://www.cnblogs.com/lovemo1314/archive/2011/04/26/2029556.html 说明: glob是python自己带的一个文件操作相关模块,用它可以 ...
- 浅谈 Python 的 with 语句（转）
add by zhj: 上下文管理器是对try-except-finally的再封装而已,只能算是优化代码这一级别的feature 原文:http://www.ibm.com/developerwor ...