Question

我需要向上移动第一列正下方的第四列。有没有可能在css中这样做？

<body>
    <div class="fleft">1 Lorem ipsum dolor sit amet</div>
    <div class="fleft">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="fleft">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="fleft">4 Lorem ipsum dolor sit amet, consectetur.</div>
    <div class="fleft">5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>

CSS

body  { width:600px;}
.fleft{ float:left; width:200px;}

请参阅小提琴

http://jsfiddle.net/9xbGC/

Answer 1

鉴于你的原始结构 - 没有没有（有唯一的CSS和没有脏的黑客）。第四列必须服从第三列的高度。

也许这个jQuery插件可以帮助你：

http://masonry.desandro.com/

Answer 2

只有这样你才能使用纯CSS来拥有3列并在它们之间分割你的内容。

Answer 3

您可以使用绝对位置并为每个位置设置顶部和左侧，但如果您不知道每个的高度，则应使用javascript执行此操作

或者您可以使用jquery插件：http://www.wookmark.com/jquery-plugin

Answer 4

不，只有你可以依赖第一个div的特定高度。

#div4{
    position: absolute;
    margin-top: 20px;
}

Answer 5

不浮动，因为浮动只调整元素的流量，而不是它们的顺序。你可以选择绝对/相对定位，javasscript。

Answer 6

指定div的宽度，以便第4个div适合第一个和第三个div之间，然后当你向左浮动第4个柱时，它应该是正确的。

编辑：您还可以使用Twitter Bootstrap附带的超棒网格系统，它非常有用，可以解决大量的布局问题。 http://twitter.github.com/bootstrap/

浮点内容的CSS问题

6 个答案: