1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>横向两列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #warp{ 9 width:960px; 10 margin:0 auto; 11 margin-top:10px; 12 } 13 #herder{ 14 height:50px; 15 background:blue; 16 } 17 #nav{ 18 height:30px; 19 background:orange; 20 margin:10px 0; 21 } 22 #main{ 23 width:100%; 24 margin-bottom:10px; 25 overflow:hidden; 26 } 27 #main .main-left{ 28 width:640px; 29 height:200px; 30 background:yellow; 31 float:left; 32 } 33 #main .main-right{ 34 width:300px; 35 height:200px; 36 background:pink; 37 float:right; 38 } 39 #content{ 40 width:100%; 41 overflow:hidden; 42 } 43 #content .content-left{ 44 width:640px; 45 height:800px; 46 background:lightgreen; 47 float:left; 48 } 49 #content .content-right-sup{ 50 width:300px; 51 height:500px; 52 background:lightblue; 53 float:right; 54 } 55 #content .content-right-sub{ 56 width:300px; 57 height:280px; 58 background:purple; 59 margin-top:20px; 60 float:right; 61 } 62 #footer{ 63 height:50px; 64 background:gray; 65 margin-top:10px; 66 } 67 </style> 68 </head> 69 <body> 70 <div id="warp"> 71 <div id="herder">页头</div> 72 <div id="nav">导航</div> 73 <div id="main"> 74 <div class="main-left">左-上</div> 75 <div class="main-right">右-上</div> 76 </div> 77 <div id="content"> 78 <div class="content-left">左-下</div> 79 <div class="content-right-sup">右-上</div> 80 <div class="content-right-sub">右-下</div> 81 </div> 82 <div id="footer">页脚</div> 83 </div> 84 </body> 85 </html>