如下圖所示效果，可以使用表格實現(xiàn)，本文采用在CSS中實現(xiàn)。

標記如下：

<div class="wrapper">
    <div class="box">
        <h1>Andy Budd</h1>
        <p> ... </p>
        <div class="bottom"></div>
    </div>
    <div class="box">
        <h1>Richard Rutter</h1>
        <p> ... </p>
        <div class="bottom"></div>
    </div>
    <div class="box">
        <h1>Jeremy Keith</h1>
        <p> ... </p>
        <div class="bottom"></div>
    </div>
</div>

在實例中，有3個div，每列一個div，每個div中包括標題、內(nèi)容、空的div，這個空的div作為底角的鉤子，將這3個div放入容器div中，使用容器div限制高度，下述代碼給框設置樣式：

.wrapper {
    width: 100%;
}
.box {
    width: 250px;
    margin-left: 20px;
    float: left;
    display: inline;
    padding: 20px;
    background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;  /*圖片使得上面兩個角成為圓角*/
}

運行結果如下：產(chǎn)生3個高度不一致的列

產(chǎn)生高度相等的三列的關鍵技術在于：給每個框設置大的底內(nèi)邊距（220px），然后用數(shù)值相似的負外邊距（-200px）來消除這個高度。

.wrapper {
    float: left;
    border: solid 1px black;
    width: 100%;
}
.box {
    width: 250px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 220px;
    margin-bottom: -200px;
    margin-left: 20px;
    float: left;
    display: inline;
    background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;
}

通過給容器浮動、添加邊框，可以看到這樣導致每個列溢出容器元素。

.wrapper {
    border: solid 1px black;
    width: 100%;
    overflow:hiddden;
}
.box {
    width: 250px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 220px;
    margin-bottom: -200px;
    margin-left: 20px;
    float: left;
    display: inline;
    background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;
}

如果把容器的overflow設置為hidden，列在最高點被剪裁，220px和-200px形成的20px的差值在每個框的底部形成可見的內(nèi)邊距。

下面把列的底邊定位在正確的位置，需要它們與容器的底部對齊：為此，把容器的position設置為relative，然后將空div的position設置為absolute，再將它們的bottom設置為0，只要給它們設置正確的寬高，就能應用底部背景圖像。

.wrapper {
    border: solid 1px black;
    width: 100%;
    overflow:hiddden;
    position: relative;
}
.box {
    width: 250px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 220px;
    margin-bottom: -200px;
    margin-left: 20px;
    float: left;
    display: inline;
    background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;
}
.bottom {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 290px;
    background: #89ac10 url(chapter08/img/bottom.gif) no-repeat left bottom;
    margin-left: -20px;/*因為在.box中設置了margin-left為20px，則.bottom向右移動了20px（如最后一圖），所以設置-20px讓它左移*/
}