横向排列 元素实际占用的高度以多列中较高的为准
flex 布局
- fleex-direction 属性定义主轴方向,默认为 row 横向
- align-item 属性定义子项在 flex 容器当前行的侧轴方向的对齐方式,默认为 stretch,元素被拉伸以适应容器(不设置高度时)
table-cell 布局
table 单元格具有等高特性
- 使用
display: table
实现 table 布局 - 使用
table-layout: fixed
实现元素水平平均分布空间 - 使用
display: table-cell
使元素具有单元格性质(等高)
overflow: hidden
- 使用
float: left
实现水平布局 - 使用
calc()
实现水平平均分布空间 - 给每列设置比较大的底内边距,然后用数值相似的负链路消除这个高度
grid 布局
- 使用
display: grid
实现 grid 布局 - 使用
gride-template-columns
设置列宽 grid-auto-flow: column
设置优先填充列