原文地址：https://www.cnblogs.com/cbza/p/7145384.html
方法一: 通过父级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>