<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度相等的列</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
font: 12px "宋體";
margin: 20px;
color: #fff;
}
h1 {
font-size: 24px;
font-weight: normal;
}
p {
font-size: 14px;
margin: 10px 0;
}
.box {
width: 250px;
margin-left: 20px;
float: left;
display: inline;
padding: 20px;
}
.wrapper {
overflow: hidden;
width: 100%;
position: relative;
}
.box {
padding-bottom: 220px;
margin-bottom: -200px;
background: #89ac10 url(top.gif) no-repeat left top;
}
.bottom {
position: absolute;
bottom: 0;
height: 20px;
width: 290px;
background: #89ac10 url(bottom.gif) no-repeat left bottom;
margin-left: -20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<h1>Andy Budd</h1>
<p>Andy is the Managing Director of Clearleft. He also goes by the title of User Experience Director depending what mood he’s in. Andy is the author of CSS Mastery, curates the dConstruct and UX London events and is responsible for Silverbackapp, our low cost usability testing application for the Mac.</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>Richard Rutter</h1>
<p>Richard is a founding partner and the production director for Clearleft. He has been designing websites and web applications since the birth of the commercial web, over twelve years ago. Richard leads the user experience team at Clearleft, pioneering innovative approaches to designing fantastic experiences for clients and their customers.</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>Jeremy Keith</h1>
<p>Jeremy is a hugely experienced developer specialising in XHTML, CSS, Javascript and PHP-driven solutions. Jeremy is technical director at Clearleft.</p>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
用到的2張圖片
原理：
利用容器padding-bottom: 220px; margin-bottom: -200px;相互抵銷內外邊距，但同時又可以填充由於文字內容不足導致的空白部分，且這部分空白由於有和圖片一樣的背景色，故視覺效果上看上去就沒有空白了
然後用父容器的overflow: hidden;裁剪掉多餘的部分（按照最短的那列開始裁去超出的其他列），這時候3列容器的底部就是一樣齊了，最後用bottom:0把底部圖片絕對定位到容器的底部，至此3列就可以等高而不受內容高度影響，也就是說不需要文字內容去撐開容器高度，也不需要設置3列的容器爲固定的高度就可以自適應等高
實際操作中發現，如果其中一列的文字特別長，而其他兩列很多，就有必要增加內外邊距的抵消，比如把內邊距設置520px，外邊距-500px;就可以增加隱藏的填充部分
