等高布局

等高布局

等高布局就是一行被划分成若干列，每一列的高度都是相同的值

---

实现方法

• display属性的值有关table实现等高布局效果
• padding + margin属性实现等高布局效果

实现效果

---

 

第一种方法

就是利用display: table;和display: table-cell;，然后就定个宽度，高度会自适应。

  		.parent {
            display: table;
        }

        .left,
        .right {
            width: 300px;
            /*表格的单元格默认是等高的*/
            display: table-cell;
        }

        .left {
            background-color: antiquewhite;
        }

        .right {
            background-color: aquamarine;
        }

<div class="parent">
        <div class="left">left</div>
        <div class="right">right right right right right right right right right right right </div>
    </div>

 

第二种方法（伪等高布局）

实现的并不是真正的等高布局，只是视觉视觉上等高。

 		.parent {
            overflow: hidden;
        }

        .left,
        .right {
            width: 300px;

            float: left;

            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }

        .left {
            background-color: antiquewhite;
        }

        .right {
            background-color: aquamarine;
        }

 <div class="parent">
        <div class="left">left</div>
        <div class="right">right right right right right right right right right right right </div>
    </div>