标签：relative ref table float zhang 参考 http 垂直 www
css布局主要是position,float以及margin等属性实现
本文主要介绍几种常见的布局：三列布局，等高布局以及水平垂直居中布局。
1 <div id="left">left</div> 2 <div id="center">center</div> 3 <div id="right">right</div>
1 #left,#right{ 2 width:200px; 3 postion:absolute; 4 top:0; /*注意不能少*/ 5 background-color:red; 6 } 7 #left{left:0;} 8 #right{right:0;} 9 10 #center{ 11 position:relative; 12 margin:0 210px; 13 background-color:green; 14 }
缺点：当中间列设置最小宽度限制时，当页面小于一定宽度，三列元素会发生层叠
1 <div id="left">left</div> 2 <div id="right">right</div> 3 <div id="center">center</div>
1 #left,#right{ 2 float:left; 3 width:200px; 4 background-color:red; 5 } 6 #right{float:right;} 7 8 #center{ 9 float:left; 10 margin:0 210px; 11 background-color:green; 12 }
margin-left为负时，该元素向之前的元素铺盖；margin-right为负时，该元素将其他元素拽向自己
1 <div id="center"> 2 <div id="centerContent">center</div> 3 </div> 4 <div id="left">left</div> 5 <div id="right">right</div>
1 #center{ 2 float:left; 3 width:100%; 4 } 5 #centerContent{ 6 margin:0 210px; 7 background-color:green; 8 } 9 10 #left,#right{ 11 float:left; 12 width:200px; 13 background-color:red; 14 } 15 16 #left{margin-left:-100%;} 17 #right{margin-left:-210px}
1 <div id="left"> 2 <div class="inner">this is left sidebar content</div> 3 </div> 4 5 <div id="main"> 6 <div class="inner">this is main content</div> 7 </div> 8 9 <div id="right"> 10 <div class="inner">this is right siderbar content</div> 11 </div>
1 #left, #right { 2 float: left; 3 margin: 0 0 0 -271px; 4 width: 50%; 5 } 6 #main { 7 width: 540px; 8 float: left; 9 background: green; 10 } 11 12 13 #left .inner, #right .inner { 14 margin: 0 0 0 271px; 15 background: red; 16 }
1 <div id="parent"> 2 <div id="left">left</div> 3 <div id="center"> center </div> 4 <div id="right">right</div> 5 </div>
1 #parent{ 2 display:table; 3 } 4 #left,#center,#right{ 5 display:table-cell; 6 }
1 #parent{ 2 position: relative; 3 height: 40px; 4 } 5 #left, # center, # right{ 6 position: absolute; 7 top: 0; 8 bottom: 0; 9 } 10 # left{ 11 left: 0; 12 width: 100px; 13 } 14 # center{ 15 left: 120px; 16 right: 120px; 17 } 18 # right{ 19 width: 100px; 20 right: 0; 21 }
大家都知道margin:0 auto可以实现元素的水平居中，那么margin:auto+绝对定位可以实现水平垂直居中。
1 <div id="parent"> 2 <div id="center">center</div> 3 </div>
1 #center{ 2 position:absolute; 3 margin:auto; 4 top:0; 5 bottom:0; 6 left:0; 7 right:0; 8 } 9 10 #parent{ 11 position:relative; 12 }
table本来就是水平居中，只需设置垂直居中就可以了。
1 #parent{ 2 display:table; 3 } 4 #center{ 5 display:table-cell; 6 vertical-align:middle; 7 }
参考资料：
标签：relative ref table float zhang 参考 http 垂直 www
原文地址：http://www.cnblogs.com/wan2/p/6395295.html
