使用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 ...
随机推荐
- git GUI 入门
一:安装一个git 及gui 二:配置gui及线上的git链接 在Git Gui中,选择Remote->add添加远程服务器,远程服务器信息有两种填写方式,填写https地址或ssh地址,对应g ...
- linux时间格式化
echo `date +'[%Y-%m-%d %H:%M:%S]'`
- 170222、使用Spring Session和Redis解决分布式Session跨域共享问题
使用Spring Session和Redis解决分布式Session跨域共享问题 原创 2017-02-27 徐刘根 Java后端技术 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用 ...
- 使用node，express，mongodb，ionic，ejs搭建的简单app个人总结
1.每次修改app.js或者其他路由js文件,都必须重启node app.js,否则修改不起作用!!! 2.<link rel="stylesheet" href=" ...
- Go & SQLite on Windows
一般golang使用的sqlite驱动包都是github.com/mattn/go-sqlite3,但是官方并没有直接支持windows平台的编译,因为windows平台编译默认需要gcc支持 其实解 ...
- 第三课补充01——set类型 sorted类型命令操作详解，redis管道及事务
1. set类型的命令操作: (1)sadd命令:向key指定的set集合添加成员 ##sadd命令:是设置set集合类型的数据,sadd <key> <mumber> [& ...
- ffmpeg命令
1 将mp4格式的视频文件转换成mkv格式 ffmpeg -i input.mp4 -vcodec copy -acodec copy output.mkv
- test-event-create
# 1 创建存储过程 /* delimiter // create procedure test() begin update test SET name = date_format(now(),'% ...
- php 汉字验证码
代码: captcha.php <?php //实现简单的验证码 //session_start session_start(); //画布 $image = imagecreatetrueco ...
- InnoDB缓存读命中率、使用率、脏块率(%) 缓冲池的读命中率(%) 缓冲池的利用率(%) 缓冲池脏块的百分率(%)
InnoDB缓存读命中率.使用率.脏块率(%) 缓冲池的读命中率(%) 缓冲池的利用率(%) 缓冲池脏块的百分率(%)