五个 (20%) 相等的 div，一行右边距为 20px

Question

如何在一行上获得 5 个(20% 相等(浮动div，除了最后一个孩子之外，每行之间有 20px 的边距？

结构：

<div class="f-item pull-left">1</div>
<div class="f-item pull-left">2</div>
<div class="f-item pull-left">3</div>
<div class="f-item pull-left">4</div>
<div class="f-item pull-left">5</div>

尝试使用以下方法，这会中断行(并且似乎忽略了最后一个孩子的"重置"(：

.f-item {
    margin-right: 20px;
    width: 20%;
    &:last-child {
        margin-right: 0;
    }
}

摆弄例子。

.f-group {
  width: 100%;
}
.f-item {
  margin-right: 20px;
  width: 20%;
  background-color: green;
  text-align: center;
  color: white;
}
.f-item:last-child {
  margin-right: 0;
}
.col-sm-12 {
  background-color: red;
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" rel="stylesheet"/>
<div class="col-sm-12">
  <div class="f-group">
    <div class="f-item pull-left">
      1
    </div>
    <div class="f-item pull-left">
      2
    </div>
    <div class="f-item pull-left">
      3
    </div>
    <div class="f-item pull-left">
      4
    </div>
    <div class="f-item pull-left">
      5
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="col-sm-12">

Answer 1

您需要调整项目宽度以允许边距宽度...

.f-item {
    width: calc(20% - 16px);
    margin-right: 20px;
    background-color: green;
    text-align: center;
    color: white;
    &:last-child {
        margin-right: 0;
    }
}

https://jsfiddle.net/7e1pdttt/1/

仅限 CSS：

.f-item {
    width: calc(20% - 16px);
    margin-right: 20px;
    background-color: green;
    text-align: center;
    color: white;
}
.f-item:last-child {
    margin-right: 0;
 }

http://www.bootply.com/jxKTTBZsSi

Answer 2

考虑 flexbox：

.f-items {
  display: flex;
  justify-content: space-between;
}
.f-item {
  margin-right: 20px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  background: #eee;
}
.f-item:last-child {
  margin-right: 0;
}

<div class="f-items">
  <div class="f-item pull-left">1</div>
  <div class="f-item pull-left">2</div>
  <div class="f-item pull-left">3</div>
  <div class="f-item pull-left">4</div>
  <div class="f-item pull-left">5</div>
</div>