簡單結構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>

?

轉載于:https://www.cnblogs.com/qwguo/p/9903348.html

總結

以上是生活随笔為你收集整理的关于页面的多种自适应布局——三列布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。