多列等高布局

一、弹性布局

flex属性默认是0 1 auto，【父控件有剩余控件也不放大，父控件空间不足按1缩小，保持本身的空间大小】
flex:1;   的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】

二、margin和padding

每列加上 padding-bottom:9999px;  margin-bottom:-9999px;同时父元素设置overflow:hidden;

  #wrapper {
    overflow: hidden;
    }

   .column {
        float: left;
        width: 200px;
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }

  <div id="wrapper">
    <div class="column left">
        <p>left</p>
        <p>left</p>
    </div>
    <div class="column center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="column right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

二、css中的table属性，实现任意多列等高

  .table {
        width: 500px;
        display: table;
    }

    .tableRow {
        display: table-row;
    }

    .tableCell {
        display: table-cell;
    }

    .cell1 {
        background: #6ee0b6;
    }

    .cell2 {
        background: #f3777b;
    }

    .cell3 {
        background: #c3c3ff;
    }
<div class="table">
    <div class="tableRow">
        <div class="tableCell cell1">
            <div>
            <p>left</p>
            <p>left</p>
            <p>left</p>
        </div>
    </div>

    <div class="tableCell cell2">
        <div>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        </div>
    </div>

    <div class="tableCell cell3">
        <div>
            <p>right</p>
            <p>right</p>
        </div>
    </div>

</div>
</div>