div+css布局自适应小结
一、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
2.position + margin
即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
3.float + 负margin
即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_right">
我是右栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
</body>
</html>
注：使用的float属性，必要时清除一下浮动。
4.用table布局实现<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
<tr>
<td width="200" bgcolor="red"></td>
<td bgcolor="green"></td>
</tr>
</table>
</body>
</html>
注：使用表格时，一定要设置高度才可以
5.触发BFC实现
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，
实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</body>
</html>
6.flex伸缩盒方法
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
flex-grow:1;
-webkit-flex-grow:1;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
二、三栏布局
掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
1. float + margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
float: left;
background-color: red;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
2. position + margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
position: absolute;
background-color: red;
left: 0;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
position: absolute;
right: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
3.float + 负margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;;
width: 100%;
}
.wrap_left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: left;
margin-left: -200px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_content">
我是中间栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</body>
</html>
4.table实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
<tr>
<td width="200" bgcolor="red"></td>
<td bgcolor="yellow"></td>
<td width="200" bgcolor="green"></td>
</tr>
</table>
</body>
</html>
5.BFC方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
float: right;
width: 200px;
background-color: green;
}
.wrap_content{
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
注：HTML中先写定宽元素，再写自适应宽度元素。
6.flex伸缩盒
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
width: 200px;
background-color: green;
}
.wrap_content{
flex-grow:1;
-webkit-flex-grow:1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_content">
我是中间栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
div+css布局自适应小结的更多相关文章
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- DIV+CSS布局重新学习之float/margin/padding
之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...
- div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
随机推荐
- shell中的交互模式：expect
在shell开发中,我们连接FTP或者passwd或sudo等操作时,需要手动输入密码.对于自动化而言,这显然是不合适的.而expect的强交互模式解决了这个问题.工作中偶有涉及到这个,个人也是简单的 ...
- BZOJ 1264: [AHOI2006]基因匹配Match DP_树状数组_LCS转LIS
由于有重复数字,我们以一个序列为基准,另一个序列以第一个序列每个数所在下标为这个序列每个数对应的值. 注意的是,拆值的时候按照在第一个序列中的位置从大到小排,强制只能选一个. 最后跑一边最长上升子序列 ...
- Project Euler 34 Digit factorials
题意:判断一个数 N 的各个位数阶乘之和是否为其本身,找出所有符合要求的数然后求和 思路:此题思路跟 30 题相同,找到枚举上界 10 ^ n <= 9! × n ,符合要求的 n < 6 ...
- C#--职业路线图
非常好的一个C#的职业技术路线图
- uva 10003 Cutting Sticks 【区间dp】
题目:uva 10003 Cutting Sticks 题意:给出一根长度 l 的木棍,要截断从某些点,然后截断的花费是当前木棍的长度,求总的最小花费? 分析:典型的区间dp,事实上和石子归并是一样的 ...
- hdu5319 Painter（模拟）
题目链接:点击打开链接 题目大意:给一个矩形.有两把刷子,一把刷红色,一把刷蓝色,红色的方向是东南,蓝色的方向是西北,红色加蓝色等于绿色,如今已知这面墙当前的状态.求从白墙到这个状态最少刷了多少次. ...
- 本地自旋锁与信号量/多服务台自旋队列-spin wait风格的信号量
周日傍晚,我去家附近的超市(...)买苏打水,准备自制青柠苏打.我感觉我做的比买的那个巴黎水要更爽口.由于天气太热,非常多人都去超市避暑去了,超市也不撵人,这仿佛是他们的策略.人过来避暑了,走的时候难 ...
- COCOS2D-X 动作 CCSequence动作序列
CCSequence继承于CCActionInterval类,CCActionInterval类为延时动作类,即动作在运行过程中有一个过程. CCSequence中的重要方法: static CCSe ...
- 【POJ 3273】 Monthly Expense (二分)
[POJ 3273] Monthly Expense (二分) 一个农民有块地 他列了个计划表 每天要花多少钱管理 但他想用m个月来管理 就想把这个计划表切割成m个月来完毕 想知道每一个月最少花费多少 ...
- Struts2 的工作原理
Struts2 的工作原理: 1)client向server发出一个http请求.webserver对请求进行解析,假设在StrutsPrepareAndExecuteFilter的请求映射路径(在w ...