浮动内容的css问题

我需要向上移动第一列下方的第四列。有没有可能在CSS中做到这一点？浮动内容的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/

来源

2012-07-13 designersvsoft

小提琴可以去。如果列的量是已知的模板被解析之前，你可以把3个栏目，以适应项目为未来的孩子 – worenga 2012-07-13 12:00:03

提供您的问题某事为好。但你仍然可以拿出有些栏目比其他栏目高得多。所以砌体可能仍然是最好的解决方案。 – 2012-07-13 12:10:42

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

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

http://masonry.desandro.com/

来源

2012-07-13 12:01:05 Christoph

只有这样，你可以做纯CSS是有3列，并在他们之间平分你的内容。

来源

2012-07-13 12:02:52

，你可以做到这一点使用位置绝对和设置顶部和左侧的每个，但你应该这样做使用JavaScript，如果你不知道的每个

高度，或者你可以使用jQuery插件：http://www.wookmark.com/jquery-plugin

来源

2012-07-13 12:03:33 jagm

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

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

来源

2012-07-13 12:05:25 32bitfloat

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

来源

2012-07-13 12:09:59 worenga

指定div的宽度，以便第四个div适合第一个和第三个div，然后当您将第四个柱子浮起时，它应该坐在右侧。

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

来源

2012-07-13 12:11:03

浮动内容的css问题

回答

相关问题