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

如何均匀地在div中分配几个div

2 个答案: