Html 可变高度的浮动图元向下推

我有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>

培根ipsum dolor sit amet短排骨猪排猪肚排骨肩胛三尖牛排骨火鸡胸脯短里脊嫩里脊磨圆。
牛角牛肉，牛里脊，猪里脊。
Boudin chuck磨圆，猪熏牛肉香肠火鸡火腿飞节牛排舌头。
三尖猪里脊舌咸牛肉小腿球尖。
火鸡猪里脊排骨香肠菲力牛排汉堡。Leberkas andouille火腿，bresaola三尖短腰肉糕小腿猪肩排骨里贝耶。
意大利熏牛肉和意大利熏牛肉舌头三尖肉干。

还有一个示例JSFIDLE：

如何使第二行

图
元素排列在前3个元素的下方

HTML/CSS解决方案比JavaScript/jQuery解决方案更可取。
只使用CSS的解决方案怎么样？添加此规则：

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

您可以使用
：第n个子类
伪类清除每四个元素

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

编辑：

4n并不能完全解决这个问题。3n+1就是你想要的

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

以下是我测试过的解决方案：

我可以修改你的体型

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

这是基于这里更一般的解决方案：
将每3个数字包装成一个DIV？+1，用于可爱的小猫照片。您需要使用css clear:left来重新开始左侧的浮动。@BradM不会把所有的数字都推到左侧吗？@KatieK我想您要么按照一个技巧小马的建议去做，要么像Pinterest那样使用jQuery来定位它们。@j08691您是对的。（4n）没有给出3行。我已经更新了它和小提琴使用（3n+1）你确定吗？在我看来像是一排三只小猫。对不起。现在天气很好。我不知道上次检查时我在想什么。FWIW，我不想将figure元素锁定到特定的大小。