0

我需要在第一列正下方向上移动第四列。有没有可能在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/

4

6 回答 6

1

鉴于您的原始结构 - 不，没有（使用唯一的 css 并且没有肮脏的黑客）。第四列必须服从第三列的高度。

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

http://masonry.desandro.com/

于 2012-07-13T12:01:05.917 回答
0

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

#div4{
    position: absolute;
    margin-top: 20px;
}
于 2012-07-13T12:05:25.173 回答
0

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

于 2012-07-13T12:09:59.633 回答
0

指定 div 的宽度，以便第 4 个 div 适合第一个和第三个 div 之间，然后当您向左浮动第 4 个列时，它应该位于右边。

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

于 2012-07-13T12:11:03.823 回答
0

使用纯 CSS 的唯一方法是拥有 3 列并将内容在它们之间拆分。

于 2012-07-13T12:02:52.720 回答
0

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

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

于 2012-07-13T12:03:33.673 回答