方法一: 通过父级 overflow:hidden, 自己设置 padding-bottom 和 margin-bottom 来实现.(方法一亲测有效)
- #wrap{
- overflow:hidden;
- width:1000px;
- margin:0 auto;
- }
- #left,#center{
- margin-bottom:-10000px;
- padding-bottom:10000px;
- }
- #left{
- float:left;
- width:250px;
- background:#00FFFF;
- }
- #center{
- float:left;
- width:500px;
- background:#FF0000;
- }
- <p > 参考链接: <a href="http://yanue.net/post-35.html" target="_blank"> 纯 CSS 实现 div 左右等高 </a></p>
方法二: 使用 table-cell
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- .left,
- .right {
- padding: 10px;
- display: table-cell;
- border: 1px solid #f40;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="left">
- left div
- <br/>
- <br/>
- <br/>
- <br/>
- <br/>
- </div>
- <div class="right">right div</div>
- </div>
- </body>
- </html>
- <p> 参考链接: <a href="http://blog.csdn.net/qinshenxue/article/details/44861695" target="_blank"> 纯 css 实现 div 左右等高 </a></p>
方法三: 使用 css3 盒模型
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- .wrap {
- display: -webkit-box;
- }
- .left,
- .right {
- padding: 10px;
- border: 1px solid #f40;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="left">
- left div
- <br/>
- <br/>
- <br/>
- <br/>
- <br/>
- </div>
- <div class="right">right div</div>
- </div>
- </body>
- </html>
- <p> 参考链接: <a href="http://blog.csdn.net/qinshenxue/article/details/44861695" target="_blank"> 纯 css 实现 div 左右等高 </a></p>
来源: http://www.bubuko.com/infodetail-2717795.html