码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-07-10 14:37:17      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:play   doc   ott   width   border   bsp   左右   har   char   

 

 

方法一: 通过父级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的高度.

标签:play   doc   ott   width   border   bsp   左右   har   char   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!