可变高度的浮动元素将兄弟向下推 [英] Floated elements of variable height push siblings down

问题描述

我有6个元素，每个元素都应该产生两行3个元素，所以我将它们浮动。但是元素的内容有很大的不同，当一个较高的元素阻止后续的兄弟元素左移时，布局会中断：

以下是示例CSS：

  figure {width：30％;向左飘浮;余量：1％; font-size：small;大纲：固体＃999 1px; } 
 img {max-width：100％; } 
  

和HTML：

 <图> 
< img src =http://placekitten.com/150/200?image=1alt =小猫1/> 
< figcaption>培根ipsum dolor坐amet短排骨猪排猪排肚排骨肩三头牛肋排火鸡胸肉短腰里脊肉地轮。 < / figcaption> 
< / figure> 
< figure> 
< img src =http://placekitten.com/150/200?image=2alt =小猫2/> 
< figcaption>排骨牛腌牛肉，牛里脊肉猪肉短腰。 < / figcaption> 
< / figure> 
< figure> 
< img src =http://placekitten.com/150/200?image=3alt =小猫3/> 
< figcaption> Boudin chuck磨圆，猪五香熏火腿火鸡腿肉牛肋排舌头。 < / figcaption> 
< / figure> 
< figure> 
< img src =http://placekitten.com/150/200?image=4alt =小猫4/> 
< figcaption>三尖猪里脊舌腌牛肉柄尖球尖。 < / figcaption> 
< / figure> 
< figure> 
< img src =http://placekitten.com/150/200?image=5alt =小猫5/> 
< figcaption>土耳其猪里脊排骨香肠菲力牛排汉堡包。 Leberkas andouille意大利熏火腿，bresaola三尖短腰肉饼小腿猪肩排骨ribeye。 < / figcaption> 
< / figure> 
< figure> 
< img src =http://placekitten.com/150/200?image=6alt =小猫6/> 
< figcaption> Pastrami andouille tongue tri-tip jerky。< / figcaption> 
< / figure> 
  

以及一个JSFiddle示例： http://jsfiddle.net/KatieK/5Upbt/

如何获得<$ c的第二行$ c> figure 元素排列在前3个元素之下？

HTML / CSS解决方案比JavaScript / jQuery解决方案更受欢迎。 p>

解决方案

如何使用CSS解决方案？添加这条规则：

  figure：nth-​​type-type（3n + 1）{
 clear：left; 
} 
  

jsFiddle示例

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:

Here is example CSS:

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

and 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>

And an example JSFiddle: http://jsfiddle.net/KatieK/5Upbt/

How can I get second row of figure elements to line up below the first 3 elements?

HTML/CSS solutions are preferable to JavaScript / jQuery solutions.

解决方案

How about a CSS only solution? Add this rule:

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

jsFiddle example

这篇关于可变高度的浮动元素将兄弟向下推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！