两种方式实现多列布局：
圣杯布局：
1 <html> 2 <head> 3 <title>Html+Css Layout</title> 4 <style type="text/css"> 5 .header{ 6 background-color: #0000aa; 7 height: 100px; 8 } 9 .article{ 10 height: 300px; 11 background-color: #ddd; 12 } 13 .footer{ 14 height: 100px; 15 background-color: #ccc; 16 } 17 .article{ 18 padding-left: 150px; 19 padding-right: 100px; 20 } 21 .middle{ 22 width: 100%; 23 height: 100%; 24 background-color: #faf; 25 26 float: left; 27 } 28 .left{ 29 background-color: #fa0; 30 height: 100%; 31 width: 150px; 32 33 float: left; 34 margin-left: -100%; 35 position: relative; 36 left: -150px; 37 } 38 .right{ 39 background-color: red; 40 width: 100px; 41 height: 100%; 42 43 float: left; 44 margin-left: -100px; 45 position: relative; 46 right: -100px; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="header">title</div> 52 <div class="article"> 53 <div class="middle">middle</div> 54 <div class="left">left</div> 55 <div class="right">right</div> 56 </div> 57 <div class="footer">copyright@</div> 58 </body> 59 </html>
圣杯布局使用了position:relative 和left:-150px结合，就使元素相对自身位置发生位移。但是实际工作可能会对.left,.right有特殊的position要求，所以出现了改良版的双飞翼布局，去掉了position，增加了布局的灵活性。同时也去掉了父层的padding-left,padding-right，避免了也可能出现的未知错误。
双飞翼布局：
1 <html> 2 <head> 3 <title>Html+Css Layout</title> 4 <style type="text/css"> 5 .header{ 6 background-color: #0000aa; 7 height: 100px; 8 } 9 .article{ 10 height: 300px; 11 background-color: #ddd; 12 } 13 .footer{ 14 height: 100px; 15 background-color: #ccc; 16 } 17 .article{ 18 /* padding-left: 150px; 19 padding-right: 100px;*/ 20 } 21 .middle{ 22 width: 100%; 23 height: 100%; 24 background-color: #faf; 25 26 float: left; 27 } 28 .left{ 29 background-color: #fa0; 30 height: 100%; 31 width: 150px; 32 33 float: left; 34 margin-left: -100%; 35 /* position: relative; 36 left: -150px;*/ 37 } 38 .right{ 39 background-color: red; 40 width: 100px; 41 height: 100%; 42 43 float: left; 44 margin-left: -100px; 45 /* position: relative; 46 right: -100px;*/ 47 } 48 .inner{ 49 margin-left: 150px; 50 margin-right: 100px; 51 } 52 </style> 53 </head> 54 <body> 55 <div class="header">title</div> 56 <div class="article"> 57 <div class="middle"> 58 <div class="inner">middle</div> 59 </div> 60 <div class="left">left</div> 61 <div class="right">right</div> 62 </div> 63 <div class="footer">copyright@</div> 64 </body> 65 </html>