使用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 ...
随机推荐
- angular-ui-bootstrap 日历控件国际化
angularjs-angular-ui-bootstrap-changing-language http://stackoverflow.com/questions/19671887/angular ...
- 160715、在web.xml中注册IntrospectorCleanupListener解决Quartz等框架可能产生的内存泄露问题
增加方式如下:web.xml中加入 <listener> <listener-class>org.springframework.web.util.Introspect ...
- SQSERVER--函数、开窗函数,-特殊的内容 （for xml path ）
1.STUFF SQL Server之深入理解STUFF sql stuff函数用于删除指定长度的字符,并可以在制定的起点处插入另一组字符.sql stuff函数中如果开始位置或长度值是负数,或者如果 ...
- TADOConnection和TADQuery组件连接访问数据库总结
首先先来简单了解一下TADOConnection控件和TADOQuery控件作用,如下图: 好了简单对这两个控件有了一个初步的认识了,下面我们就通过两种形式来进行访问数据库:第一种是通过手动配置不需要 ...
- rainbow table 彩虹表
RainbowTable 的使用和性能的小测试 - SV的边界 - CSDN博客 https://blog.csdn.net/cecilulysess/article/details/4804707 ...
- GetWindowThreadProcessId
函数功能:该函数返回创建指定窗口线程的标识和创建窗口的进程的标识符,后一项是可选的. 函数原型:DWORD GetWindowThreadProcessld(HWND hwnd,LPDWORD lpd ...
- java连接elastic search 9300
java连接elastic search 导入jar包:https://www.elastic.co/guide/en/elasticsearch/client/java-api/5.5/_maven ...
- rabbitmq channel参数详解【转】
1.Channel 1.1 channel.exchangeDeclare(): type:有direct.fanout.topic三种durable:true.false true:服务器重启会保留 ...
- linux下Tomcat shutdown无效
问题: linux下Tomcat shutdown无效 linux下关闭tomcat后,发现重新启动Tomcat后.port号提示被占用, 原因: 这时可能是项目中的后台线程或者socket依旧在执行 ...
- Kotlin开发Android笔记
外国人写的一个天气预报的例子,最后有源码下载地址,初学者可以研读一下 http://blog.csdn.net/true100/article/category/6257988 1:Kotlin介绍及 ...