CSS两列及三列自适应布局方法整理
在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：
两列布局：左侧定宽，右侧自适应
方法一：利用float和负外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main,.sitebar{
font: bolder 20px/300px;
}
.main{
width: 100%;
float: left;
}
.main .content{
margin-left: 200px;
background-color: red;
}
.sitebar{
width: 200px;
float: left;
background-color: green;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="main">
<div class="content">右侧主体自适应区块</div>
</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>
优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。
缺点：多添加了一层div包裹。
方法二：利用外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
float: left;
width: 200px;
background-color: green;
}
.content{
background-color: red;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="sitebar">左侧定宽200px区块</div>
<div class="content">右侧主体自适应区块</div>
</body>
</html>
优点：代码简洁，便于理解
缺点：不利于页面优化，右侧主内容区后加载
方法三：利用position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
width: 200px;
background-color: green;
}
.content{
position: absolute;
left: 200px;
right: 0;
top: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="content">右侧主体自适应区块</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>
优点：考虑到了页面优化，右侧内容区先加载
缺点：目测没有
上述三种方法兼容IE7以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素font-size=0，再分别设置子元素font-size解决。
方法四：利用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
display: flex;
}
.content{
flex:1;
background-color: red;
}
.sitebar{
flex:0 0 200px;
order:-1;
background-color: green;
}
</span><span class="hljs-tag" style="color: #cc6666;"></<span class="hljs-title" style="color: #8abeb7;">style</span>></span>
</head>
<body>
<div class="main">
<div class="content">右侧主体自适应区块</div>
<div class="sitebar">左侧定宽200px区块</div>
</div>
</body>
</html>
优点：CSS3新布局方式，高大上
缺点：仅支持IE11+。
三列布局：左右定款，中间自适应。
方法一：使用负外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main,.left,.right{
height: 300px;
font: 20px/300px;
color: #fff;
text-align: center;
}
.main{
width: 100%;
float: left;
}
.main .content{
margin: 0 300px 0 200px;
background-color: black;
}
.left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.right{
width: 300px;
float: left;
margin-left: -300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="content">中间主体区域宽度自适应</div>
</div>
<div class="left">左侧定宽200px</div>
<div class="right">右侧定宽300px</div>
</body>
</html>
优点：兼容IE7+，考虑到页面优化，中间内容区先加载
缺点：多一层div嵌套，不易理解
方法二：使用绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 102px;
margin-left: 102px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="center">中列</div>
<div id="left">左列</div>
<div id="right">右列</div>
</body>
</html>
优点：代码结构简单，考虑到了页面优化，中间内容去先加载
缺点：目测没有
方法三：使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: green;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 200px;
background-color: blue;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
background-color: grey;
}
</style>
</head>
<body>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
</body>
</html>
优点：高大上
缺点：仅支持IE11+
CSS两列及三列自适应布局方法整理的更多相关文章
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- web标准(复习)--3 二列和三列布局
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- Web标准：三、二列和三列布局
知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...
- css实现三栏自适应布局（两边固定，中间自适应）以及优缺点
方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...
- CSS 三栏自适应布局
CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout *zoom:1 比如使用浮动后的清除浮动 clear:both 需求的延伸也会有一些: 比如三栏等高 ...
- 【HTML+CSS】右侧固定，左侧自适应布局
<style> *{ padding: 0; margin: 0; } #left{ float: right; width: 100%; height: 300px; } #box{ m ...
- css一边固定，另一边自适应的方法
第一种: 第二种:
随机推荐
- C# 条形码识别
目录: 一.识别库 二.从一张图片中提取多个条形码 三.注意事项 从博客园学了很多,本着分享的目的,希望后来者遇到类似问题时,不必重复造轮子,早点下班回家^-^. 一.识别库 目前主流的识别库主要有Z ...
- spark RDD的元素顺序（ordering）测试
通过实验发现: foreach()遍历的顺序是乱的 但: collect()取到的结果是依照原顺序的 take()取到的结果是依照原顺序的 为什么呢???? 另外,可以发现: take()取到了指定数 ...
- Android通过LIstView显示文件列表
[绥江一百]http://www.sj100.net 欢迎,进入绥江一百感谢点击[我的小网站,请大家多 ...
- PB11.5创建及调用WebService
我今天做了这个“PB创建及调用WebService”的小作业,下面我来分享一下我的整个实践过程以及我遇到的问题,希望对大家有所帮助,这个小作业是分以下三部来完成的: 一.构建WebService ①创 ...
- sql常识-union
SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...
- 基于DIV+ul+li实现的表格(多示例)
一个无序列表biaoge,前四个列表项我们赋予了类biaotou.因为这四个项是表格头部,应该与表格数据有所区别.所以单独赋予了类,可以方便控制.下面我们开始CSS代码的编写:由 www.169it. ...
- XML中的Xpath解析的例子
/*XPath 术语节点(Node)在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或者根节 ...
- Android开发之如何保证Service不被杀掉（前台服务）
序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill.参考了现今各种定制版的系统和安全厂商牛虻软件,如何能保证自 ...
- 《QQ欢乐斗地主》山寨版
使用Cocos2d-x编写,模仿<QQ欢乐斗地主>的界面实现了一个具有简单AI的单机版斗地主游戏. 游戏的详细说明请查看游戏目录下的help.txt文件. 下载地址: http://dow ...
- winform 与 html 交互 简单案例
本文主要简单的记录winform如何与html文件中的信息如何进行交互,即在winform中加载html界面,从而可以进行相互调用. 1.新建一个winform项目,若要在winform中加载html ...