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

【问题标题】：Floated images in Image Gallery Have Spacing Issues图片库中的浮动图像存在间距问题
【发布时间】：2015-10-06 10:36:39
【问题描述】：

我正在尝试使用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>

【问题讨论】：

截图在哪里？
@GoodBadandUgly 图片来源隐藏在问题的 Markdown 中。我把它包括在内。
尝试使用display:inline-block; vertical-align:top; 而不是float:left;。通过这种方式，您可以获得更直观的结果。
这可能与stackoverflow.com/questions/12729629/… 重复。
感谢建议 display: inline-block;垂直对齐：顶部； - 但是，我对为什么在这种情况下使用该代码感到困惑。我通常只对文本使用“inline-block”。

标签： css image css-float figure

【解决方案1】：

您可以对所有奇怪的孩子使用 css clear。

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

查看以下文章以了解有关float 和clear 的更多信息。

【讨论】：

嘿，我对原始帖子有一个后续问题，希望您能帮助我。如果用户比以前扩大窗口，我想添加另一个断点将我的两列图像库分成三列。但是，图像卡在左侧和中心，如下所示：drive.google.com/file/d/0B-1e2Ni5AJalUG4xeWdKWWJ6dWM/… - 关于如何修复的任何想法？
一种方法是在新断点中使用li:nth-child(3n + 1) 而不是li:nth-child(odd)。 Checkout this JSFiddle.