浮动元素的可变高度推倒兄弟姐妹

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元素排列在前三个元素下面？HTML/CSS解决方案比JavaScript/jQuery解决方案更可取。

Answer 1

CSS唯一的解决方案怎么样？添加以下规则：

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

jsFiddle示例