多栏等高布局（负margin的障眼法）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

采用负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;
        }

来源：oschina

链接：https://my.oschina.net/u/3407699/blog/3035747

标签

margin