方式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>CSS三列等高
原文地址：http://www.cnblogs.com/running1/p/7533114.html