方法一: 通过父级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左右等高
时间： 2024-11-08 23:14:07