单列布局

两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

三栏布局

中间列自适应宽度，旁边两侧固定宽度

缺点

• center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行
• 如果其中一列内容高度拉长，其他两列的背景并不会自动填充。

等高布局

等高布局是指子元素在父元素中高度相等的布局方式

定位(absolute) + 负margin

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}