等高布局的几种实现方式

等高布局的几种实现方式

JiangWen Lv4

table

1
2
3
4
5
6
7
8
.container {
display: table;
}

.left {
display: table-cell;
width: 30%
}

flex

1
2
3
4
5
 .container {
display: flex;
flex-direction: row;
}

grid

1
2
3
4
.container {
display: grid;
grid-auto-flow: column;
}

负maigin

1
2
3
4
5
6
7
8
.container {
overflow: hidden;
}

.left {
margin: -99999px
padding: 99999px
}
  • 标题: 等高布局的几种实现方式
  • 作者: JiangWen
  • 创建于: 2021-11-18 11:25:00
  • 更新于: 2023-06-18 15:54:09
  • 链接: https://blog.jiangwen.site/2021/11/18/CSS/等高布局/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论
此页目录
等高布局的几种实现方式