使用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 ...
随机推荐
- svn 插件去除已经保存的密码方法
删除掉C:\Documents and Settings\hao\Application Data\Subversion\auth\svn.simple文件夹下的文件即可. 再次访问时,会弹出要求输入 ...
- Minecraft Forge编程入门三 “初始化项目结构和逻辑”
经过前面两个教程Minecraft Forge编程入门一 "环境搭建"和Minecraft Forge编程入门二 "工艺和食谱",我们大体知道了如何自定义合成配 ...
- C++ 调用webservice 出现 函数返回值为 3 (SOAP_TAG_MISMATCH) 的解决方案
最近在用C++ gsoap做webservice服务时,函数返回值为SOAP_TAG_MISMATCH (==3)错误码,原因是我传入wsdl地址时连同后面的?wsdl都传入了,如下: http:// ...
- Vue1.0常用语法
摘要: var vm = new Vue({ el: "选择器", 挂载到页面的那个元素里,即确定vue的作用范围 外部可通过vm.$el访问,得到的是一个原生dom元素,可进行对 ...
- Storm-源码分析-acker (backtype.storm.daemon.acker)
backtype.storm.daemon.acker 设计的巧妙在于, 不用分别记录和track, stream过程中所有的tuple, 而只需要track root tuple, 而所有中间过程都 ...
- Css选择器定位详解
1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的 ...
- 配置 Docker 镜像下载的本地 mirror 服务
Docker registry 工具如今已经非常好的支持了 mirror 功能,使用它能够配置一个本地的 mirror 服务.将 pull 过的镜像 cache 在本地.这样其他主机再次 pull 的 ...
- 在MySQL数据库的表中可以给某个整数类型的字段赋字符串类型的值
- PyNest——part 4: topologically structured networks
part 4: topologically structured networks incorporating structure in networks of point neurons 如果我们使 ...
- shell脚本调用传参【转载】
转自:https://www.cnblogs.com/cisum/p/8010658.html 1.直接使用$0,$1,$2,$3 $0是脚本的名字,就是按顺序来 #!/bin/bash # auth ...