html - 可变高度的浮动元素将兄弟姐妹向下推

Question

我有 6 个元素，它们应该产生两行，每行 3 个元素，所以我浮动它们。但是元素的内容变化很大，当一个更高的元素阻止后续兄弟元素一直向左浮动时，布局就会中断：

这是示例 CSS：

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

和 HTML：

<figure>
  <img src="http://placekitten.com/150/200?image=1" alt="Kitten 1" />
  <figcaption>Bacon ipsum dolor sit amet short ribs pork chop pork belly spare ribs shoulder tri-tip beef ribs turkey brisket short loin tenderloin ground round. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=2" alt="Kitten 2" />
  <figcaption>Short ribs cow corned beef, beef tenderloin swine biltong short loin. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=3" alt="Kitten 3" />
  <figcaption>Boudin chuck ground round, pig pastrami salami turkey ham hock beef ribs tongue. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=4" alt="Kitten 4" />
  <figcaption>Tri-tip pork loin tongue corned beef shankle ball tip. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=5" alt="Kitten 5" />
  <figcaption>Turkey swine tenderloin spare ribs sausage filet mignon hamburger. Leberkas andouille prosciutto, bresaola tri-tip short loin meatloaf shank pig shoulder spare ribs ribeye. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=6" alt="Kitten 6" />
  <figcaption>Pastrami andouille tongue tri-tip jerky.</figcaption>
</figure>

还有一个 JSFiddle 示例：http: //jsfiddle.net/KatieK/5Upbt/

如何让第二行figure元素排列在前 3 个元素下方？

HTML/CSS 解决方案优于 JavaScript/jQuery 解决方案。

Answer 1

仅使用 CSS 的解决方案怎么样？添加此规则：

figure:nth-of-type(3n+1) {
    clear:left;
}

jsFiddle 示例

Answer 2

您可以使用:nth-child伪类每隔四个元素清除一次。

figure:nth-child(4n){clear: left;}

编辑：

4n并没有完全削减它。3n + 1 就是你想要的。

figure:nth-child(3n + 1){clear: left;}

http://jsfiddle.net/jMCng/1/

Answer 3

这是我测试过的解决方案：http: //jsfiddle.net/5Upbt/7/

我修改你的身材风格

figure { display: inline-block; vertical-align: top; width: 30%; margin-left: 1%; font-size: small; outline: solid #999 1px; }

这是基于这里更通用的解决方案：http: //jsfiddle.net/bazmegakapa/Ft9d2/