同樣傳播div與小空間

Question

您好我嘗試使用我可以在網上找到的例子，但我似乎無法讓它工作，所以誰比誰更好問。

我希望平等地傳播id =「klip」。我將它們的寬度設置爲18％，因此每個空間可以是2％。

現在它的外觀：https://jsfiddle.net/d8L1Lax4/

我的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在頁面上必須是唯一的，我將其更改爲類。

.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

作爲替代了flexbox，你可能要考慮使用網格系統。這在很多情況下都能很好地爲您服務，包括您所問的問題。 Bootstrap爲您提供了一個易於使用的網格，但有一些像Pure.css這樣的輕量級網格。

如果使用純，例如，它看起來像這樣：

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