浮动可变高度容器 [英] 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:
如果你愿意使用 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屋!