标签：tle png oom body back play clear 宽度 中间
布局说明：
实现左右栏固定宽度，中间栏自适应的宽度。
如下图1所示：
方式一：圣杯布局
圣杯布局结构如下：
<div>
<article class="main"></article>
<aside class="left"></aside>
<aside class="right"></aside>
</div>
圣杯布局样式如下：
1、主体div和公共样式的设置
1 *{margin: 0;padding: 0;}
2
3 div{
4 background: #eee;
5 padding: 20px 160px 20px 240px;/*腾出左右的空间用于布局走右侧*/
6 margin: 20px;
7 border: 1px solid #999999;
8 box-sizing: border-box;
9 overflow: auto;/*清浮动*/
10 }
11
12 article,aside{
13 background: #FFF;
14 border:1px solid #999999;
15 }
2、中间栏的样式设置
1 .main{
2 width: 100%;/*撑满div的宽度*/
3 height: 300px;
4 float: left;
5 box-sizing: border-box;
6 padding: 20px;
7 }
3、左侧栏样式设置：
.left{
width: 200px;
height: 100px;
float: left;
position: relative;
margin-left: -100%;/*配合float使用，是元素移动到与main同行的位置*/
box-sizing: border-box;
left: -220px;/*调整位置*/
padding: 20px;
}
4、右侧栏样式设置：
.right{
width: 120px;
height: 200px;
float: left;
position: relative;
margin-left: -120px;
box-sizing: border-box;
right: -140px;
}
5、极端判断设置：
@media only screen and (max-width: 650px) {/*解决浏览器窗口极端现象*/ div{ width: 610px; } }
方法二：双飞翼布局：
1、主体结构：
<div id="container"> <div id="wrapper"> <div id="main">main</div> </div> <div id="left">left</div> <div id="right">right</div> </div>
2、公共样式与container样式设置：
body{ padding: 20px; font-size: 14px; font-family: sans-serif; } #container{ overflow: hidden;/*清浮动*/ /*width: 100%;*//*可加可不加*/ padding: 20px; background-color: #ccc; box-sizing: border-box;/*进入怪异盒模型*/ }
3、wrapper样式与main样式设置
#wrapper{ width: 100%; float: left;/*这是必须*/ } #main{ height: 300px; border: 1px solid #555; margin-left: 220px;/*空开左侧栏*/ margin-right: 140px;/*空开右侧栏*/ background: #eee; }
4、left样式设置：
#left{ width: 200px; height: 200px; border: 1px solid #555; background: #fff; float: left;/*这是必须*/ margin-left: -100%;/*将right移动到与#main同行*/ }
5、right样式设置：
#right{ width: 120px; height: 120px; border: 1px solid #555; background: #fff; float: left;/*这是必须*/ margin-left: -122px;/*将right移动到与#main同行*/ }
6、考虑极端，媒体查询：
@media only screen and (max-width: 600px) {/*解决浏览器窗口极端现象*/ #container{ width: 544px; } }
方法三：左右浮动
1、结构布局（左右中）：
<div class="section"> <div id="left_div"></div> <div id="right_div"></div> <div id="container"></div> </div>
2、section样式设置：
.section{ border: 1px #999 solid; background-color: #eee; padding: 20px; margin: 20px; zoom: 1;/*IE请浮动*/ overflow: hidden;/*IE请浮动*/ } .section::after,section::before{ content: ‘‘; display: block; visibility: hidden; } .section::after{ clear: both; }
3、left_div样式设置：
#left_div{ width: 158px;
height:100px; padding: 20px; border: 1px #999 solid; background: #fff; float: left; }
4、right_div样式设置：
#right_div{ width: 80px;
height:100px; padding: 20px; border: 1px #999 solid; float: right; }
5、container样式设置：
#container{
height:200px; margin-left: 220px;/*左侧留白*/ margin-right: 140px;/*右侧留白*/ border: 1px #999 solid; }
标签：tle png oom body back play clear 宽度 中间
原文地址：http://www.cnblogs.com/hanyuxuan/p/6739439.html
