网页布局 CSS实现DIV并列等高

同事去笔试遇到的问题

要求3列div根据内容的变化通过css实现等高

效果图：

原理：

同列的div设置一个父级 overflow:hidden 超出部分隐藏

给同列的div设置css margin-bottom:-10000px; padding-bottom:10000px;

 1 <HTML>
 2 <HEAD>
 3 <TITLE>网页布局 CSS实现DIV并列等高</TITLE>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <style type="text/css">
 6     #content{ width:900px;overflow:hidden;margin: 0 auto;}
 7     #content div.con{margin-bottom:-10000px; padding-bottom:10000px;background-color: green;width: 290px;float: left;margin-right: 10px;color: #fff;}
 8 </style>
 9 </head>
10 <BODY>
11 <div id="content">
12     <div class="con">
13        div1<br>
14        div1<br>
15        div1<br>
16        div1<br>
17        div1<br>
18        div1<br>
19     </div>
20     <div class="con">div2 </div>
21    <div class="con">div3</div>
22 </div>
23 </BODY>
24 </HTML>

 

posted @ 2013-12-20 11:07  dtdxrk  阅读(970)  评论(0)  编辑  收藏  举报