Question

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

我希望同样传播id =“klip”。我将它们的宽度设置为18％，因此每个空间可以是2％。

我的HTML：

<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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

作为flexbox的替代方案，您可能需要考虑使用网格系统。在很多情况下，这将很好地为您服务，包括您要询问的那个。 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>

看起来像this。

同样以小空间扩展div

2 个答案: