横向排列 元素实际占用的高度以多列中较高的为准

image.png

flex 布局

flex 属性

  • fleex-direction 属性定义主轴方向,默认为 row 横向
  • align-item 属性定义子项在 flex 容器当前行的侧轴方向的对齐方式,默认为 stretch,元素被拉伸以适应容器(不设置高度时)

演示 demo

table-cell 布局

table 单元格具有等高特性

  • 使用 display: table 实现 table 布局
  • 使用 table-layout: fixed 实现元素水平平均分布空间
  • 使用 display: table-cell 使元素具有单元格性质(等高)

演示 demo

overflow: hidden

  • 使用 float: left 实现水平布局
  • 使用 calc() 实现水平平均分布空间
  • 给每列设置比较大的底内边距,然后用数值相似的负链路消除这个高度

演示 demo

grid 布局

grid 属性

  • 使用 display: grid 实现 grid 布局
  • 使用 gride-template-columns 设置列宽
  • grid-auto-flow: column 设置优先填充列

演示 demo