CSS Float左,右,左,右......全部到顶部

时间:2012-04-06 11:49:38

标签: css css-float

这个问题的可怕标题,我知道。遗憾。

我有四个div similar to this 。我想要做的只是删除div 2和4之间的垂直空间,而不改变HTML的结构。是否可以只使用CSS(当然没有负边距或其他非通用解决方案)?而且我还希望div 1和3在没有比1更长的div 2的情况下没有垂直空间。

所需的结果将呈现something like this

感谢。

2 个答案:

答案 0 :(得分:1)

嗯,不仅仅是漂浮物。那就是使用绝对定位,或者改变html的结构,这样你就可以将#2和#3的div分别右移,然后在div#4上左移一个。

绝对定位和负边距是另一种选择,不是很动态,但它有效。

最好的选择是使用一些jQuery来解决你的问题。 查看:http://masonry.desandro.com/

答案 1 :(得分:0)

添加到第4个div的代码

position:relative;
top:-100px; 

查找添加到第4个div的类

http://jsfiddle.net/eZGTm/1/