如何在div中均勻分佈多個div

Question

我在頁腳之前有以下div，我想均勻分佈一些div。目前我正在使用手動保證金百分比，但我想知道是否有辦法讓CSS自動將它們分配給空間？

CSS

#books {margin:10px auto;}   
.bookimage {width:7%; 
      padding-top:7%; 
      display:inline-block; 
      margin:2%; 
      } 

HTML

<div id="books"> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
    <div class="bookimage"> </div> 
</div> 

Answer 1

在你的CSS

#books { 
    margin:10px auto; 
    display:flex; 
    justify-content:space-between; 
} 

Answer 2

首先我建議改變你的ID來代替類使用此。具有相同ID的多個元素無效並可能導致問題。 如果你不需要IE9及以下版本的支持，你可以使用flexbox來解決你的問題。

HTML

<div class="books"> 
    <div class="book"></div> 
    <div class="book"></div> 
    <div class="book"></div> 
    <div class="book"></div> 
</div> 

CSS

.books { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
    margin: 10px auto; 
}