CSS三列等高
方式1:这种方式主要的原理是给每个框设置大的底内边距,然后 用数值相似的负值外边距消除浮动
<html> <head> <title></title> <style type="text/css"> .wrapper{ overflow: hidden;//清除浮动 width: 100%; position: relative; } .box{ width: 300px; float: left; background: #ccc; margin-left: 20px; padding: 20px 20px 520px 20px; margin-bottom: -500px; } .bottom{ position: absolute; height: 20px; bottom: 0; width: 300px; margin-left: -20px;padding-bottom: 520px; } </style> </head> <body> <div class="wrapper"> <div class="box"> <h2>box1</h2> <p>hello word!</p> <p>hello word!</p> <div class="bottom"></div> </div> <div class="box"> <h2>box2</h2> <p>hello word!</p> <div class="bottom"></div> </div> <div class="box"> <h2>box3</h2> <p>hello word!</p> <div class="bottom"></div> </div> </div> </body> </html>