均匀分布的div，空间小

Question

嗨，我尝试使用我可以在网上找到的示例，但我似乎无法使其工作，所以谁比你们更好问。

我希望平等地传播id="klip"。 我将它们的宽度设置为 18%，因此每个空格可以是 2%。

现在的样子：https://jsfiddle.net/d8L1Lax4/

我的网页：

<div class="boks">
   <span id="klip">2 KLIP</span>
   <span id="klip">8 KLIP</span>
   <span id="klip">16 KLIP</span>
   <span id="klip">32 KLIP</span>
   <span id="klip">48 KLIP</span>
</div>

我的 CSS：

.boks > #klip, #pris {
   display: inline-block;
   *display: inline; /* For IE7 */
   zoom: 1; /* Trigger hasLayout */
   width: 18%;
   text-align: center;
   background-color: #da85a3;
   padding-top: 20px;
   padding-bottom: 20px;
   font-family: 'Poppins', sans-serif !important;
   font-size: 17px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

Answer 1

我建议使用弹性框布局。请注意，id页面上必须是唯一的，我将其更改为类。

.boks {
  display: flex;
  justify-content: space-between; /*or space-around*/
  background-color: aqua;
}
.klip {
  width: 18%;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px;
  text-align: center;
  background-color: #da85a3;
}

<div class="boks">
  <span class="klip">2 KLIP</span>
  <span class="klip">8 KLIP</span>
  <span class="klip">16 KLIP</span>
  <span class="klip">32 KLIP</span>
  <span class="klip">48 KLIP</span>
</div>

Answer 2

作为弹性框的替代方法，您可能需要考虑使用网格系统。这在许多情况下都能很好地为您服务，包括您询问的情况。Bootstrap为您提供了一个易于使用的网格，但也有像Pure.css这样的轻量级网格。

例如，如果您使用 Pure，它看起来像这样：

.klip > div {
  background-color: #ddd;
  text-align: center;
  margin: 0 5px 0;
  padding: 20px 0;
}
/* If you don't want any leading or trailing margins: */
.klip:first-child > div {
  margin-left: 0;
}
.klip:last-child > div {
  margin-right: 0;
}
<div class="pure-g boks">
  <div class="pure-u-1-5 klip">
    <div>2 Klip</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>8 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>16 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>32 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>48 KLIP</div>
  </div>
</div>

它看起来像这样。