CSS：等宽的三栏布局

发表于 | 分类于 | | 阅读数
字数统计: 154 字 | 阅读时长 ≈ 1 分钟 
1
2
3
4
5
<div class="box">
    <div class="left"></div>    
    <div class="center"></div>
    <div class="right"></div>
</div>

float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
  width: 100%;
  height: 200px;
  background: black;
}
.left, .center, .right {
  width: 33.33%;
  height: 100%;
  float: left;
  background: #FFA54F;
}
.center {
  background: #FFA500;
}
.right{
  background: #FFA07A;
}

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
  width: 100%;
  height: 200px;
  background: black;
  display: flex;
}
.left, .center, .right {
  width: 33.33%;
  height: 100%;
  background: #FFA54F;
}
.center {
  background: #FFA500;
}
.right{
  background: #FFA07A;
}

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
  width: 100%;
  height: 200px;
  background: black;
  display: table;
}
.left, .center, .right {
  display: table-cell;
  width: 33.33%;
  height: 100%;
  background: #FFA54F;
}
.center {
  background: #FFA500;
}
.right{
  background: #FFA07A;
}
-------------本文结束 感谢您的阅读-------------