CSS-同一行的元素高度统一
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
img1 120*200
img2 120*300
img3 120*150
img1 120*200
img2 120*300
img3 120*150
img1 120*200
img2 120*300
img3 120*150
CSS-同⼀⾏的元素⾼度统⼀
# ⼀：flex ⼤法 ## 步骤 1. 设置外部容器 `display: flex;` 2. 设置内部容器 `align-items: stretch;` ## 原理 > ## ⽰例
# ⼆：padding 补偿法⽹上搜了⼀下发现这种⽅法居然有这种这个⾼⼤上的名词。
## 步骤 1. 设置外部容器超出隐藏：`overflow: hidden;` 2. 设置内部容器⼀个很⼤的 padding-bottom 和负 margin-bottom：`margin-bottom:-10000px; padding-bottom:10000px;` ## 原理 > > CSS 的margin-bottom 属性⽤于设置元素的底部外边距，允许设置负数值。
⼀个正数值将让它相对于正常流与邻近块更远，⽽负数值将使得更近。
我的理解是⽤ padding-bottom 把外部容器撑开（外部容器设置了 overflow: hidden; 已经创建 BFC），然后负的 margin-bottom 并不会将元素实际⾼度改变，只会改变这个容器计算时的⾼度，这样外部容器的⾼度计算时就为最⾼内部容器⾼度了。
## ⽰例
# 三：table 布局相当于⽤ HTML 的 table 元素 ## 步骤 1. 设置外部容器 `display: table;` 2. 设置内部容器 `display: table-cell;` ## 原理 > ##⽰例。