浮动可变高度容器 [英] float variable height containers

问题描述

所以我有 x 数量的块"要向左浮动..像这样:

So i have x amount of "blocks" that I want to float left.. Like this :

A B C D

E F G H

但是，例如，如果 B 的长度是其余部分的两倍，则 A & 之间会有空格.E、C&G、D&H.

BUT, if B is twice as long as the rest, for example, there would be white space between A & E, C & G, D & H.

我怎样才能避免这种情况，让所有容器都向左浮动，然后很好地适应，中间没有多余的空白?

How can I avoid that and just have all the containers float to the left and then fit in nicely without excess white space in between ?

推荐答案

CSS 在一般情况下无法处理.

CSS cannot handle this in the general case.

如果有固定数量的列，你可以作弊并这样做:http://jsfiddle.净/suaaK/11/

If there are a fixed number of columns, you can cheat and do this: http://jsfiddle.net/suaaK/11/

否则:

有关候选技术的比较，请参阅此答案，表明它们不起作用:

See this answer for a comparison of the candidate techniques, showing that they don't work:

• 可变高度的 CSS 浮动 Div

如果你愿意使用 JavaScript，你应该使用 jQuery Masonry.

If you're willing to use JavaScript, you should use jQuery Masonry.

演示:

• http://masonry.desandro.com/demos/animating-css-transitions.html
• http://masonry.desandro.com/demos/adding-items.html

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