Css布局系列-经典三列布局
浏览数：19 /
时间：2015年06月09日
今天给大家介绍经典三列布局和实现原理：
- 通过浮动（float）进行实现，如果对float不是很清楚可以去看看我上篇介绍的；
- 通过绝对定位布局；
- 通过float加margin的负值进行组合实现。
对三种情况分析：
- 第一种通过浮动（float）布局，特别需要注意在定义元素结构的时候要将居中元素放到right元素的后面(container->left-right-center)，不能像正常那种思维去定义结构（container ->left-center-right）；
*{margin: 0;padding: 0;}
html, body{height: 100%;}
.container, .left, .right, .center{height: 100%;}
.left{float: left;width: 200px;background-color: #f60;}
.right{float: right;width: 200px;background-color: #e30;}
.center{background-color: #fde560;padding: 0 10px 0 10px;margin: 0 200px;}
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
float布局。
</div>
</div>
2. 第二种在定义的时候必须设置最外层容器position: relative，在定义结构的时候左右合两边都设为绝对定位，且必须设置居中元素的左右边距marign（container ->left-center-right）；
*{margin: 0;padding: 0;}
html, body{height: 100%;}
.container, .left, .right, .center{height: 100%;}
.container{position: relative;}
.left, .right{top: 0;position: absolute;width: 200px;}
.left{left: 0;background-color: #f60;}
.right{right: 0;background-color: #e30;}
.center{background-color: #fde560;padding: 0 10px 0 10px;margin: 0 200px;}
<div class="container">
<div class="left">
</div>
<div class="center">
绝对与相对进行组合布局 最外层容器必须设置 position: relative。
</div>
<div class="right">
</div>
</div>
3. 最后一种有一点复杂，利用margin负值加float的实现，大概讲讲他负值的作用，左边上边边距负值会向左和上偏移，右边下边边距负值会导致紧跟着后面元素与其重叠。
*{margin: 0;padding: 0;}
html, body{height: 100%;}
.container, .left, .right, .main, .main-body{height: 100%;}
.left, .right{width: 200px;background-color: #f60;float: left;}
.left{margin-left: -100%;}
.right{background-color: #e30;margin-left: -200px;}
.main{float: left;width: 100%;}
.main-body{margin: 0 200px;background-color: rgb(250,250,154);}
<div class="container">
<div class="main">
<div class="main-body">
float浮动加margin负值组合布局。
</div>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
