Question

我正在尝试使用float属性来创建一个看起来像两列图库的页面。它几乎就在那里，但是列中有些尴尬的空间我不知道如何消除。解决方案是否涉及清除一些浮动？

问题的屏幕截图：

Screenshot

代码：

#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 clear。

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

查看以下文章，详细了解float和clear。

图像库中的浮动图像存在间距问题

1 个答案: