2012-03-14 89 views
1

我知道有大量的浮动问题,但我似乎有点卡住如何克服这个问题。CSS浮动位置问题

在这里看到我的例子:http://jsfiddle.net/eE9WT/1/

我所试图做的(或INFACT,试图避免)是第三.float DIV一旦第二.float格已经开始启动。

我更喜欢第三个div直接落在第一个下面,利用页面上的所有空间。我知道我可以将它分成两列,但我想知道是否有更好的解决方案,而不必这样做。

相信与否,在我为网络开发的5年内,这似乎是我第一次遇到这个问题!

谢谢你们

+0

这个答案可能会帮助你:http://stackoverflow.com/a/9141944/681807 – 2012-03-14 12:23:41

+0

伙计们非常感谢你的帮助。通过一些关于这个Stackoverflow的讨论爬行后,似乎这个插件有解决方案: http://masonry.desandro.com/index.html 痛苦的一点点不得不求助于插件,但它确实工作很好。这jsfiddle似乎是我发现插件之前得到的最接近的: http://jsfiddle.net/gK2Vn/ 问题是,如果你的浮动div中有内容,它似乎不会延长高度的divs。如果有人能够建立在这个非常棒的jsfiddle上,他们会变得非常接近! – remi90 2012-03-14 14:45:58

+1

这是不是只是因为你在Javascript中设置随机div高度时设置'height'而不是'min-height'? http://jsfiddle.net/gK2Vn/1/ – 2012-03-14 19:19:00

回答

0

您可以添加一个规则来进行第二浮动是正确

.float + .float { 
    float: right; 
} 
0

我认为这是你正在寻找的解决方案:我感动了所有的div到

JSFiddle

留下float。 在容器上用padding-right在屏幕右侧做了一些空间。 然后使用position: relative;将第二列移动到该空间。

0
Display:inline-block; 
zoom:-1; 

不止浮动它为你做点事情。只有一些罕见的情况下使用浮动。我知道这不符合你的目标,我只是探索我的一面。