两列布局
很多网站都使用了两列布局,就是左边固定,右边自适应的布局。两列布局有多种方法,现在来列举一下
第一种:margin + float / margin + absolute
将左边设置 float 或者 absolute ,使其脱离文档流,右边使用margin-left设置左右间隔,大小一般为 >= 左边的宽度,因为是块级元素,所以右边可以充满剩余的屏幕,这样就实现了左边固定,右边自适应的效果。
代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>twoList layout</title> 6 <style type="text/css"> 7 .left{ 8 /*float:left;*/ 9 position:absolute; 10 width:200px; 11 height:30px; 12 background-color:red; 13 } 14 .right{ 15 height:30px; 16 background-color:blue; 17 margin-left:220px; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="left"></div> 23 <div class="right"></div> 24 </body> 25 </html>
效果如下:
第二种:float + margin +calc()
关于calc(),可参考:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
将左右都设置向左浮动,左边使用margin-right来设置左右间隔,右边的宽度设置为calc(100% - (left-width + margin-right))
代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>twoList layout</title> 6 <style type="text/css"> 7 .left{ 8 float:left; 9 width:200px; 10 height:30px; 11 background-color:red; 12 margin-right:20px; 13 } 14 .right{ 15 float:left; 16 height:30px; 17 background-color:blue; 18 width:calc(100% - 220px); 19 } 20 </style> 21 </head> 22 <body> 23 <div class="left"></div> 24 <div class="right"></div> 25 </body> 26 </html>
第三种:float + overflow + margin
左边设置float,右边清除浮动就可以显示两列布局了, 使用margin来设置左右间隔,可以在左边设置margin-right来设置左右间隔,也可以在右边设置margin-left来设置左右间隔,值得注意的是若是右边使用margin-left来设置间隔时,需要算上左边的宽度
代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>twoList layout</title> 6 <style type="text/css"> 7 .left{ 8 float:left; 9 width:200px; 10 height:30px; 11 background-color:red; 12 /*margin-right:20px;*/ 13 } 14 .right{ 15 height:30px; 16 background-color:yellow; 17 overflow:hidden; 18 margin-left:220px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="left"></div> 24 <div class="right"></div> 25 </body> 26 </html>