首页 > Web开发 > 详细

css 实现 左右div 等高, 同时父级div就是最高的子div的高度.

时间:2017-07-10 13:59:05      阅读:378      评论:0      收藏:0      [点我收藏+]

 

 

方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 margin-bottom来实现.

 

 1 #wrap{
 2  overflow:hidden;
 3  width:1000px;
 4  margin:0 auto;
 5 }
 6 #left,#center{
 7  margin-bottom:-10000px;
 8  padding-bottom:10000px;
 9 }
10 #left{
11  float:left;
12  width:250px;
13  background:#00FFFF;
14  }
15 #center{
16  float:left;
17  width:500px;
18  background:#FF0000;
19  }

 

参考链接:  纯css实现div左右等高

 

 

 

 方法二: 使用 table-cell

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         .left,
 8         .right {
 9             padding: 10px;
10             display: table-cell;
11             border: 1px solid #f40;
12         }
13     </style>
14 </head>
15 <body>
16 <div class="wrap">
17     <div class="left">
18         left div
19         <br/>
20         <br/>
21         <br/>
22         <br/>
23         <br/>
24     </div>
25     <div class="right">right div</div>
26 </div>
27 </body>
28 </html>

 

 参考链接:   纯css实现div左右等高

 

方法三:使用css3盒模型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         .wrap {
 8             display: -webkit-box;
 9         }
10         .left,
11         .right {
12             padding: 10px;
13             border: 1px solid #f40;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="wrap">
19     <div class="left">
20         left div
21         <br/>
22         <br/>
23         <br/>
24         <br/>
25         <br/>
26     </div>
27     <div class="right">right div</div>
28 </div>
29 </body>
30 </html>

 

 参考链接: 纯css实现div左右等高

 

css 实现 左右div 等高, 同时父级div就是最高的子div的高度.

原文:http://www.cnblogs.com/cbza/p/7145384.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!