：
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解决方案更可取。
#1 楼
仅CSS解决方案怎么样？添加此规则：figure:nth-of-type(3n+1) {
clear:left;
}
jsFiddle示例
#2 楼
您可以使用:nth-child伪类清除每个第四个元素。figure:nth-child(4n){clear: left;}
编辑： 3n + 1是您想要的。
figure:nth-child(3n + 1){clear: left;}
http://jsfiddle.net/jMCng/1/
评论
@ j08691你是对的。 （4n）的行数不为3。我已经对其进行了更新，并使用了小提琴（3n +1）
– idrumgood
13年2月26日在20:18
你确定？对我来说好像是3只小猫。
– idrumgood
13年2月26日在20:27
抱歉。现在很好。我不知道上次检查时在想什么。
–布莱恩·阿特维尔（Brian Attwell）
13年2月26日在20:35
#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/
评论
FWIW，我宁愿不将图形元素锁定为特定大小。
– KatieK
2013年2月26日20:31
评论
将3位数字换成DIV吗？+1可爱的小猫照片。您需要使用css clear：left再次从头开始重新浮动。
@BradM不会把所有数字都向左推吗？
@KatieK我认为您必须按照One Trick Pony的建议进行操作，或者必须像Pinterest一样使用jQuery定位它们。