關於頁面的多種自適應佈局——三列布局
阿新 • • 發佈：2018-11-04
簡單結構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 .more{background-color:red; width:150px;} 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;} 9 p.clear{clear:both;} 10 /**簡單結構1，列表在前，內容在後**/ 11 .layout-1{} 12 .layout-1 .sidebar{float:left;} 13 .layout-1 .more{float:right;} 14 .layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3畫素外邊距問題*/} 15 .layout-1-1{} 16 .layout-1-1 .sidebar{float:right;} 17 .layout-1-1 .more{float:left;} 18 .layout-1-1 .content{margin:0px 210px 0px 160px; _margin:0px 207px 0 157px; /*IE6下的3畫素外邊距問題*/} 19 .layout-3{position:relative;} 20 .layout-3 .sidebar{position:absolute; left:10px; top:10px;} 21 .layout-3 .more{position:absolute; right:10px; top:10px;} 22 .layout-3 .content{margin:0px 160px 0 210px;} 23 .layout-3-1{position:relative;} 24 .layout-3-1 .sidebar{position:absolute; right:10px; top:10px;} 25 .layout-3-1 .more{position:absolute; left:10px; top:10px;} 26 .layout-3-1 .content{margin:0px 210px 0 160px ;} 27 </style> 28 <div class="layout layout-1"> 29 <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div> 30 <div class="more"><p>.layout-1 .more{float:right;}</p></div> 31 <div class="content"><p>.layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3畫素外邊距問題*/}</p></div> 32 <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 33 </div> 34 <div class="layout layout-1-1"> 35 <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div> 36 <div class="more"><p>.layout-1 .more{float:left;}</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-3"> 42 <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div> 43 <div class="more"><p>.layout-3 .more{position:absolute; right:10px; top:10px;}</p></div> 44 <div class="content"><p>.layout-3 .content{margin:0px 160px 0px 210px;}</p></div> 45 <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 46 </div> 47 <div class="layout layout-3-1"> 48 <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div> 49 <div class="more"><p>.layout-3 .more{position:absolute; left:10px; top:10px;}</p></div> 50 <div class="content"><p>.layout-3 .content{margin:0px 210px 0px 160px;}</p></div> 51 <p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 52 </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 .more{background-color:red; width:150px;} 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;} 9 p.clear{clear:both;} 10 /**簡單結構2，內容在前，列表在後**/ 11 .layout-10{} 12 .layout-10 .content{margin:0px 210px -60px 160px;} 13 .layout-10 .sidebar{float:right;} 14 .layout-10 .more{float:left;} 15 16 .layout-10-1{} 17 .layout-10-1 .content{margin:0px 210px 0px 160px;} 18 .layout-10-1 .sidebar{float:right; margin-top:-30px;} 19 .layout-10-1 .more{float:left; margin-top:-30px;} 20 .layout-11{position:relative;} 21 .layout-11 .content{margin-left:210px;} 22 .layout-11 .sidebar{position:absolute; left:10px; top:10px;} 23 .layout-11-1{position:relative;} 24 .layout-11-1 .content{margin-right:210px;} 25 .layout-11-1 .sidebar{position:absolute; right:10px; top:10px;} 26 </style> 27 <div class="layout layout-10"> 28 <div class="content"><p>.layout-10 .content{margin:0px 210px -60px 160px;}/**這裡的margin-bottom:-60px;需要通過js來計算，取值為content區的高度，也可以給sidebar：margin-top:-30px;**/}</p></div> 29 <div class="sidebar"><p>.layout-10 .sidebar{float:right;}</p></div> 30 <div class="more"><p>.layout-10 .more{float:left;}</p></div> 31 <p class="clear">這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 32 </div> 33 <div class="layout layout-10-1"> 34 <div class="content"><p>.layout-10-1 .content{margin:0px 210px 0px 160px;}</p></div> 35 <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;}/**這裡的margin-top:-30px;需要通過js來計算，取值為content區的高度，也可以給content：margin-bottom:-30px;後邊的元素需要清除浮動**/}</p></div> 36 <div class="more"><p>.layout-10-1 .more{float:left; margin-top:-30px;}</p></div> 37 <p class="clear">.layout-10-1 p{clear:both;}<br/>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 38 </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 .more{background-color:red; width:150px;} 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;} 9 p.clear{clear:both;} 10 /**複雜結構佈局**/ 11 .layout-21{} 12 .layout-21 .wrap{ float:left; width:100%;} 13 .layout-21 .content{margin:0px 160px 0 210px;} 14 .layout-21 .sidebar{float:left; margin-left:-100%;} 15 .layout-21 .more{float:right; margin-left:-150px;} 16 .layout-22{} 17 .layout-22 .wrap{float:left; width:100%;} 18 .layout-22 .content{margin-right:210px;} 19 .layout-22 .sidebar{float:right; margin-left:-200px;} 20 .layout-23{} 21 .layout-23 .wrap{float:left; width:100%; margin-right:-200px;} 22 .layout-23 .content{margin-right:210px;} 23 .layout-23 .sidebar{float:left;} 24 .layout-24{} 25 .layout-24 .wrap{float:right; width:100%; margin-left:-200px;} 26 .layout-24 .content{margin-left:210px;} 27 .layout-24 .sidebar{float:left;} 28 </style> 29 <div class="layout layout-21"> 30 <div class="wrap"> 31 <div class="content"> 32 <p>.layout-21 .wrap{ float:left; width:100%;}<br />.layout-21 .content{margin-left:210px;}</p> 33 </div> 34 </div> 35 <div class="sidebar"> 36 <p>.layout-21 .sidebar{float:left; margin-left:-100%;/*如果最外邊的div.layout,設定了border或者padding的話，那麼ie6下的邊距表現不對*/}</p> 37 </div> 38 <div class="more"><p>.layout-21 .more{float:right; margin-right:-100%;}</p></div> 39 <p class="clear">是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容</p> 40 </div>