使用 HTML5/CSS3 堆叠图像行？

Question

我试图将图像逐行排列，但出于某种原因，结果不是我想要的。图像唯一一次换行是在我填满页面的时候。我试过 overflow:hidden，但是当图像展开时，它们被白色覆盖 space。我不知道我的代码是否有问题，或者我只是做错了。我有一个画得不好的图像和下面的代码。

figure {
  width: 150px;
  float: left;
  margin: 0 20px 0 0;
  background: white;
  border: 10px solid white;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  position: relative;
}
figure img {
  width: 100%;
}
figure:hover {
  -webkit-box-shadow: 0 3px 10px #666;
  -moz-box-shadow: 0 3px 10px #666;
}
figure.tall:focus {
  outline: none;
  -webkit-transform: scale(3.0);
  -moz-transform: scale(3.0);
  -webkit-box-shadow: 0 3px 10px #666;
  -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}

<section class="image-gallery">

  <div class="wrapper">
    <figure class="tall" tabindex=1>
      <img src="Gallery/image.jpg" alt="" />
    </figure>
    <figure class="tall" tabindex=2>
      <img src="Gallery/image.jpg" alt="" />
    </figure>
  </div>

  <div class="wrapper">
    <figure class="tall" tabindex=3>
      <img src="Gallery/image.jpg" alt="" />
    </figure>

    <figure class="tall" tabindex=4>
      <img src="Gallery/image.jpg" alt="" />
    </figure>
  </div>

</section>

如有任何帮助或建议，我们将不胜感激。

P.S。很抱歉我的绘画功底不足。

Answer 1

只需将其添加到您的代码中，它应该可以正常工作。

.wrapper {
    clear:left;
}

因为包装器的内容是浮动的，所以您需要强制后续包装器清除其左侧的任何内容，否则它们只会一个接一个地浮动。

更新：

您还可以包括您在绘图中所述的文字。如果你在 <figure> 中使用 <figcaption> ，它就会按预期排列。我更新了我的 jsFiddle 以反映这一点。

如果您希望文本位于两行图像之间，而不是与其上方的图像相关联，您将需要再次使用 clear:left; 将文本推到第一行图像下方。

使用 HTML5/CSS3 堆叠图像行？

Stacking Rows of Images Using HTML5/CSS3?

html

css

image