等高布局的几种实现方式

等高布局的几种实现方式

The Redefine Team Master
  2021-11-18 11:25 2021-11-18 11:25 创建   2024-11-25 01:42:56 2024-11-25 01:42:56 更新    47 字  1 分钟  

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
}
  • 标题: 等高布局的几种实现方式
  • 作者: The Redefine Team
  • 创建于 : 2021-11-18 11:25:00
  • 更新于 : 2024-11-25 01:42:56
  • 链接: https://jiangwen5945.github.io/blog/2021/11/18/CSS/等高布局/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
等高布局的几种实现方式
  1. table
  2. flex
  3. grid
  4. 负maigin