使用背景图片
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 7 #wrap{ width:476px; background:url(http://placehold.it/200x200.png) repeat-y 200px;} 8 9 #column1{ float:left; width:200px;background-color: red;} 10 11 #column2{ float:right; width:276px;} 12 13 .clear{ clear:both;} 14 </style> 15 </head> 16 <body> 17 <div id="wrap"> 18 19 <div id="column1">这是第一列</div> 20 21 <div id="column2">这是第二列</div> 22 23 <div class="clear"></div> 24 25 </div> 26 </body> 27 </html>
CSS解决
解决思路:给其父盒子加一个样式,overflow:hidden;
其他三个子元素分别加一个很大值的padding-bottom,和一个负值的margin-bottom
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>三列布局</title> 5 <style type="text/css"> 6 .container{ 7 overflow: hidden; 8 } 9 10 .container > div{ 11 float: left; 12 padding-bottom: 9999px; 13 margin-bottom: -9999px; 14 word-break: break-all; 15 width:50px; 16 } 17 .left{ 18 background:red; 19 20 21 } 22 .middle{ 23 background:blue 24 25 } 26 27 .right { 28 background:yellow 29 30 } 31 </style> 32 </head> 33 <body> 34 35 36 <div class="container"> 37 <div class="left">111111111111111111111</div> 38 <div class="middle">333333333333333333333333333333333333</div> 39 <div class="right">2222</div> 40 </div> 41 </body> 42 </html>