如何设置宽度为 33% 的列之间的边距？

Question

我认为这是很多类似的问题，但我还没有找到好的解决方案。我有一个容器，其中包含 3 列，宽度为 33%。我想像截图一样在它们之间添加边距。

我尝试这样做：

HTML：

<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>

CSS：

.container {
    width: 500px;
    border: 3px solid red;
    overflow: hidden;
    padding: 20px 0;
}

.column {
    width: 33.33%;
    float: left;
    height: 200px;
    background: #ccc;
    text-align: center;
    margin-left: 20px;
}

.column:first-child {
    margin: 0;
}

但最后一列移动到新行。如何在不改变宽度的情况下在块之间添加空格？

JSFiddle

Answer 1

显然，列的宽度必须小于容器的 33%，因为在某些情况下您要添加 20 像素的边距。当然，除非 40px 正好等于宽度的 1%。

我怀疑您所追求的是在添加边距后列的大小相等……所以剩余宽度的 33%。

Flexbox可以做到这一点。

Flexbox 支持IE10 及更高版本

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 3px solid red;
  overflow: hidden;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.column {
  flex: 1;
  height: 200px;
  background: #ccc;
  text-align: center;
}
.column:nth-child(2) {
  margin: 0 20px;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

计算解决方案

Calc 支持是 IE9 及更高版本

如其他答案中所述，calc可用于在考虑所需边距的情况下定义列的宽度。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 3px solid red;
  overflow: hidden;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.column {
  float: left;
  height: 200px;
  background: #ccc;
  text-align: center;
  width: calc((100%-40px)/3);
}
.column:nth-child(2) {
  margin: 0 20px;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>