三列布局的实现

1.flex布局实现三列等高布局

align-items：stretch

2.padding margin 和隐藏实现三列等高

padding-bottom撑开内容高度100px，margin-bottom设置负值使下面的元素向上移动
再对父容器设置overflow:hidden;

图片.png

代码

3.三层包裹，利用包裹层div自身的自适应性，实现三列等高

父容器层层往左移

图片.png

代码：

图片.png

图片.png

图片.png

代码

4.margin负值实现三列布局

图片.png

代码：

图片.png

图片.png

注意：

给中间层添加包裹层是个重点

因为，只有当width为auto时 设置margin和padding才会压缩div的宽度
当要达到使div自适应的宽度显示在中间时 必须要给它加一个包裹层 宽度100% 这样center的宽度才能是 「 auto 」
假象，不要包裹层 给center自己设置width:100% 当设置margin-left：200px时 center右移200px 这个时候center是移动到了右边的窗口外面 这个时候 需要给center设置margin-right 不会起作用
所以必须给它加一个包裹层