本文介绍了float可变高度容器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有x量的块,我想浮动左..像这样:



ABCD



EFGH



但是,如果B是其余部分的两倍,那么A& E,C& G,D& H。



如何避免这种情况,只需将所有容器向左移动,然后适当地放置,而不会在两者之间有过多的空格?

解决方案

CSS无法处理这种情况。



如果有固定数目列,则可以进行欺骗并执行此操作:



否则:



查看此答案以比较候选技术,







如果您愿意使用JavaScript,请使用。



演示:







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

A B C D

E F G 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 cannot handle this in the general case.

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

Otherwise:

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

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

Demos:

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

10-11 19:35