多欄等高佈局（負margin的障眼法）

• 採用負margin html:

<div class="box">
    <div class="app1">
        <p>
            阿達撒撒發順豐看看劇咖啡店
        </p>
        <p>
            阿達撒撒發順豐看看劇咖啡店
        </p>
    </div>
    <div class="app2">
        <p>
            上過課大概多少咖喱深V麻煩點卡薩丁
        </p>
        <p>
            當咖啡開工飯是女方
        </p>
        <p>
            當咖啡開工飯是女方
        </p>
        <p>
            當咖啡開工飯是女方
        </p>
        <p>
            當咖啡開工飯是女方
        </p>
    </div>
    <div class="app1">
        <p>
            阿達撒撒發順豐看看劇咖啡店
        </p>
        <p>
            阿達撒撒發順豐看看劇咖啡店
        </p>
    </div>
</div>

css:

*{
            margin: 0;
            padding: 0;
        }
        .box {
            margin: auto;
            max-width: 600px;
            overflow: hidden;/*隱藏起子元素超出的部分*/
            /*box的高度有app1和app2中最大的那個決定*/
        }

        .app1, .app2 {
            margin-bottom: -99999px;/*這樣足夠大*/
            padding-bottom: 99999px;
            width: 30%;
            float: left;
        }

        .app1 {
            background-color: red;

        }

        .app2 {
            background-color: blue;
        }

• 採用table-cell，缺點是不能兼容ie8如下 html：

<div class="box">
    <div class="son item1">
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </div>
    <div class="son item2">
        <p>456</p>
        <p>456</p>
        <p>456</p>
    </div>
    <div class="son item3">
        <p>789</p>
        <p>789</p>
    </div>
</div>

css:

* {
            margin: 0;
            padding: 0;
        }

        .box {
            display: table;
            width: 300px;
        }

        .son {
            display: table-cell;/*不能兼容ie8如下*/
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: blue;
        }
        .item3{
            background-color: red;
        }