三列布局的实现
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 不会起作用
所以必须给它加一个包裹层
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量