如何用纯css实现多个div横向并排等高的框，不能用table布局且要兼容IE6

使用背景图片

 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>

 

posted @ 2017-02-28 12:54  被折叠的记忆  阅读(1275)  评论(0)  编辑  收藏  举报