前端面试题 - 32. css 三列等宽布局如何实现?

实现 CSS 三列等宽布局的方法有很多，这里介绍两种常用的方法：

使用 float 实现

<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.container {
  overflow: hidden;
}
.col {
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  padding: 0 10px;
}

使用 flexbox 实现

<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.container {
  display: flex;
}
.col {
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding: 0 10px;
}

在上面的两种方法中，分别使用了 float 和 flexbox 来实现三列等宽布局。其中，float 方法需要设置父容器的 overflow 属性为 hidden 来清除浮动影响，而 flexbox 方法则不需要。需要注意的是，在设置三列等宽布局时，需要将每列的宽度设置为 33.33% 或者 calc(100% / 3)，并且考虑到盒模型的影响，需要将盒模型设置为 border-box。此外，为了使每列之间有间距，可以设置每列的内边距。