關於頁面的多種自適應佈局——兩列布局

咱們在切頁面的時候打交道最多的就是關於佈局排版的技巧，我這裏總結了一些平時作頁面時用的到各類佈局技巧，做爲筆記便於往後隨時查詢。

一、簡單結構1，列表在前，內容在後

 1 <style type="text/css">
 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
 3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
 4 .wrap{}
 5 .content{background-color:green; /*height:290px;*/}
 6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;}
 7 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
 8 p.clear{clear:both;}
 9 /**簡單結構1，列表在前，內容在後**/
10 .layout-1{}
11     .layout-1 .sidebar{float:left;}
12     .layout-1 .content{margin-left:210px; _margin-left:207px; /*IE6下的3像素外邊距問題*/}
13 .layout-1-1{}
14     .layout-1-1 .sidebar{float:right;}
15     .layout-1-1 .content{margin-right:210px; _margin-right:207px;text-overflow:ellipsis; white-space:nowrap; /*IE6下的3像素外邊距問題*/}
16 .layout-2{}
17     .layout-2 .sidebar{float:left; margin-right:10px; _margin-right:7px; /*IE6下的3像素外邊距問題*/}
18     .layout-2 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout沒有起做用，使用zoom:1來實現*/}
19 .layout-2-1{}
20     .layout-2-1 .sidebar{float:right; margin-left:10px; _margin-left:7px; /*IE6下的3像素外邊距問題*/}
21     .layout-2-1 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout沒有起做用，使用zoom:1來實現*/}
22 .layout-3{position:relative;}
23     .layout-3 .sidebar{position:absolute; left:10px; top:10px;}
24     .layout-3 .content{margin-left:210px;}
25 .layout-3-1{position:relative;}
26     .layout-3-1 .sidebar{position:absolute; right:10px; top:10px;}
27     .layout-3-1 .content{margin-right:210px;}
28 </style>
29 
30 <div class="layout layout-1">
31     <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div>
32     <div class="content"><p>.layout-1 .content{margin-left:210px; _margin-left:207px; /*IE6下的3像素外邊距問題*/}</p></div>
33     <p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
34 </div>
35 <div class="layout layout-1-1">
36     <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div>
37     <div class="content"><p>.layout-1-1 .content{margin-right:210px; _margin-right:207px; /*IE6下的3像素外邊距問題*/}</p></div>
38     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
39 </div>
40 
41 <div class="layout layout-2">
42     <div class="sidebar"><p>.layout-2 .sidebar{float:left; margin-right:10px; _margin-right:7px; /*IE6下的3像素外邊距問題*/}</p></div>
43     <div class="content"><p>.layout-2 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout沒有起做用，使用zoom:1來實現*/}</p></div>
44     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
45 </div>
46 <div class="layout layout-2-1">
47     <div class="sidebar"><p>.layout-2-1 .sidebar{float:right; margin-left:10px; _margin-left:7px; /*IE6下的3像素外邊距問題*/}</p></div>
48     <div class="content"><p>.layout-2-1 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout沒有起做用，使用zoom:1來實現*/}</p></div>
49     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
50 </div>
51 <div class="layout layout-3">
52     <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
53     <div class="content"><p>.layout-3 .content{margin-left:210px;}</p></div>
54     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
55 </div>
56 <div class="layout layout-3-1">
57     <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div>
58     <div class="content"><p>.layout-3 .content{margin-right:210px;}</p></div>
59     <p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
60 </div>

二、簡單結構2，內容在前，列表在後,這種佈局兼容性不是很好，內容在前對於SEO優化很重要

 1 <style type="text/css">
 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
 3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
 4 .wrap{}
 5 .content{background-color:green; /*height:290px;*/}
 6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;}
 7 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
 8 p.clear{clear:both;}
 9 
10 /**簡單結構2，內容在前，列表在後**/
11 .layout-10{}
12     .layout-10 .content{margin-left:210px; margin-bottom:-30px;}
13     .layout-10 .sidebar{}
14 .layout-10-1{}
15     .layout-10-1 .content{margin-right:210px; margin-bottom:-30px;}
16     .layout-10-1 .sidebar{float:right;}
17 .layout-11{position:relative;}
18     .layout-11 .content{margin-left:210px;}
19     .layout-11 .sidebar{position:absolute; left:10px; top:10px;}
20 .layout-11-1{position:relative;}
21     .layout-11-1 .content{margin-right:210px;}
22     .layout-11-1 .sidebar{position:absolute; right:10px; top:10px;}
23 
24 </style>
25 <div class="layout layout-10">
26     <div class="content"><p>.layout-10-1 .content{margin-right:210px; margin-bottom:-30px;/**這裏的margin-bottom:-30px;須要經過js來計算，取值爲content區的高度，也能夠給sidebar：margin-top:-30px;**/}</p></div>
27     <div class="sidebar"><p>.layout-10 .sidebar{}</p></div>
28     <p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
29 </div>
30 <div class="layout layout-10-1">
31     <div class="content"><p>.layout-10-1 .content{margin-right:210px;}</p></div>
32     <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;/**這裏的margin-top:-30px;須要經過js來計算，取值爲content區的高度，也能夠給content：margin-bottom:-30px;後邊的元素須要清除浮動**/}</p></div>
33     <p class="clear">.layout-10-1 p{clear:both;}<br/>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
34 </div>
35 
36 <div class="layout layout-11">
37     <div class="content"><p>.layout-11 .content{margin-left:210px;}</p></div>
38     <div class="sidebar"><p>.layout-11 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
39     <p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
40 </div>
41 
42 <div class="layout layout-11-1">
43     <div class="content"><p>.layout-11 .content{margin-left:210px;}</p></div>
44     <div class="sidebar"><p>.layout-11 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
45     <p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>
46 </div>

三、複雜結構,內容在前，列表在後，可以很好的實現自適應佈局，而且兼容性好。內容在前對於SEO優化很重要

  1 <style type="text/css">
  2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
  3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
  4 .wrap{}
  5 .content{background-color:green; /*height:290px;*/}
  6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;}
  7 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
  8 p.clear{clear:both;}
  9 
 10 /**複雜結構佈局**/
 11 .layout-21{}
 12     .layout-21 .wrap{ float:left; width:100%;}
 13     .layout-21 .content{margin-left:210px;}
 14     .layout-21 .sidebar{float:left; margin-left:-100%;}
 15 .layout-22{}
 16     .layout-22 .wrap{float:left; width:100%;}
 17     .layout-22 .content{margin-right:210px;}
 18     .layout-22 .sidebar{float:right; margin-left:-200px;}
 19 .layout-23{}
 20     .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}
 21     .layout-23 .content{margin-right:210px;}
 22     .layout-23 .sidebar{float:left;}
 23 .layout-24{}
 24     .layout-24 .wrap{float:right; width:100%; margin-left:-200px;}
 25     .layout-24 .content{margin-left:210px;}
 26     .layout-24 .sidebar{float:left;}
 27 </style>
 28 <div class="layout layout-21">
 29     <div class="wrap">
 30         <div class="content">
 31             內容區域,左漂浮
 32             <p>
 33                 .layout-21 .wrap{ float:left; width:100%;}<br />
 34                 .layout-21 .content{margin-left:210px;}
 35             </p>
 36         </div>
 37     </div>
 38     <div class="sidebar">
 39         列表區域
 40         <p>
 41             .layout-21 .sidebar{float:left; margin-left:-100%;}
 42         </p>
 43     </div>
 44     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 
 45 </div>
 46 
 47 <div class="layout layout-22">
 48     <div class="wrap">
 49         <div class="content">
 50             內容區域
 51             <p>
 52                 .layout-22 .wrap{float:left; width:100%;}<br />
 53                 .layout-22 .content{margin-right:210px;}
 54             </p>
 55 
 56         </div>
 57     </div>
 58     <div class="sidebar">
 59         列表區域
 60         <p>
 61         .layout-22 .sidebar{float:right; margin-left:-200px;}
 62         </p>
 63     </div>
 64     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 
 65 </div>
 66 
 67 <div class="layout layout-23">
 68     <div class="wrap">
 69         <div class="content">
 70             內容區域
 71             <p>
 72                 .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}<br />
 73                 .layout-23 .content{margin-right:210px;}
 74             </p>
 75 
 76         </div>
 77     </div>
 78     <div class="sidebar">
 79         列表區域
 80         <p>
 81         .layout-2 .sidebar{float:left;}
 82         </p>
 83     </div>
 84     <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 
 85 </div>
 86 
 87 <div class="layout layout-24">
 88     <div class="wrap">
 89         <div class="content">
 90             內容區域
 91             <p>
 92                 .layout-24 .wrap{float:left; width:100%;}<br />
 93                 .layout-24 .content{margin-right:210px;}
 94             </p>
 95 
 96         </div>
 97     </div>
 98     <div class="sidebar">
 99         列表區域
100         <p>
101         .layout-24 .sidebar{float:right; margin-left:-200px;}
102         </p>
103     </div>
104     <p class="clear">clear:both<br />這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p>   
105 </div>