可变高度的浮动元素将兄弟姐妹推下 [英] Floated elements of variable height push siblings down
问题描述
我有 6 个元素,它们应该产生两行,每行 3 个元素,所以我将它们浮动.但是元素的内容变化很大,当一个更高的元素阻止后续兄弟元素一直向左浮动时,布局就会中断:
I have 6 elements which should result in two rows of 3 elements each, so I've floated them. But the content of the elements varies quite a bit, and the layout breaks when one taller element prevents subsequent siblings from floating all the way left:
这是示例 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/
And an example JSFiddle: http://jsfiddle.net/KatieK/5Upbt/
如何让 figure
元素的第二行排列在前 3 个元素下方?
How can I get second row of figure
elements to line up below the first 3 elements?
HTML/CSS 解决方案优于 JavaScript/jQuery 解决方案.
HTML/CSS solutions are preferable to JavaScript / jQuery solutions.
推荐答案
仅使用 CSS 的解决方案怎么样?添加此规则:
How about a CSS only solution? Add this rule:
figure:nth-of-type(3n+1) {
clear:left;
}
这篇关于可变高度的浮动元素将兄弟姐妹推下的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!