图片库中的浮动图像有间距问题

Question

我正在尝试使用 float 属性来创建一个看起来像双栏图片库的页面。差不多了，但是列内有一些尴尬的空格，我不知道如何消除。解决方法是否需要清除部分浮动？

问题的截图。

代码：

#image-gallery figure {
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
}
figure img {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border: 3px solid purple;
  box-sizing: border-box;
}
#image-gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 500px) {
  #image-gallery img {
    width: 45%;
  }
  #image-gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
  }
}

<section>
  <div>
    <ul id="image-gallery">
      <li>
        <figure>
          <img src="street-art-banksy.jpg" alt='missing' />
          <figcaption><a href="street-art-banksy.jpg">Street Art | Banksy</a>`</figcaption>`
        </figure>
      </li>

      <li>
        <figure>
          <img src="SoulForSale.jpg" alt="missing" />
          <figcaption><a href="SoulForSale.jpg">Soul For Sale | Bosoletti</a>`</figcaption>`
        </figure>
      </li>

      <li>
        <figure>
          <img src="ColorRain.jpg" alt="missing" />
          <figcaption><a href="ColorRain.jpg">Color Rain | Chris Wiedmann</a>`</figcaption>`
        </figure>
      </li>

      <li>
        <figure>
          <img src="NataliaRak.jpg" alt="missing" />
          <figcaption><a href="NataliaRak.jpg">Mural | Natalia Rak</a>`</figcaption>`
        </figure>
      </li>

      <li>
        <figure>
          <img src="Jetsonoroma-Lola.jpg" alt="missing" />
          <figcaption><a href="Jetsonoroma-Lola.jpg">Lola | Jetsonoroma</a>`</figcaption>`
        </figure>
      </li>

      <li>
        <figure>
          <img src="JoeCaslin-TheCastle.jpg" alt="missing" />
          <figcaption><a href="JoeCaslin-TheCastle.jpg">The Castle | Joe Caslin</a>
          </figcaption>
        </figure>
      </li>

      <li>
        <figure>
          <img src="RenaissanceMasters-OwenDippie.jpg" alt="missing" />
          <figcaption><a href="RenaissanceMasters-OwenDippie.jpg">Michelangelo, Raphael, Donatello, and Leonardo | Owen Dippie</a>
          </figcaption>
        </figure>
      </li>

      <li>
        <figure>
          <img src="VariousAndGold-Facetime.jpg" alt="missing" />
          <figcaption><a href="VariousAndGold-Facetime.jpg">Facetime | Various and Gold</a>
          </figcaption>
        </figure>
      </li>
    </ul>
  </div>
</section>

Answer 1

你可以在所有的奇数子上使用css清除。

li:nth-child(odd) {
    clear: left;
}

查看以下文章，了解更多关于 float 和 clear.

• https:/css-tricks.comall-about-floats。
• https:/developer.mozilla.orgen-USdocsWebCSSclear。