将浮动元素直接放在彼此的下方

我想在下一行中显示一排拖拽div，下一个div直接位于最后一个下方。就像这样：将浮动元素直接放在彼此的下方

enter image description here

由于布局已建成的CMS，我不能把盒子1,3和2,4的分隔符格。有没有一种方法来实现这种行为没有额外的包装元素？（正常的浮动行为不起作用，显示内联/内联块也没有办法。）或者需要一些JavaScript来构建这样的布局？

来源

2011-02-24 wowpatrick

由于高度不同，这看起来像我仍然没有找到一个通用的纯CSS技术来处理它的问题，尽管尝试真的很难。

我已经张贴了这个答案之前，我已经放弃和使用jQuery插件要做到这一点，在过去类似的东西 css alignment question

：

jQuery Masonry

一张图片胜过千言万语：

来源

2011-02-24 15:30:03 thirtydot

+1好像没有纯粹的css解决方案 – Sotiris 2011-02-24 15:48:07

很棒！其实就是我一直在寻找的东西！可惜我没有旧邮政，但感谢再次发布它。 – wowpatrick 2011-02-24 16:13:37

您可以使用nth-child(odd)至clearfloat:left;。

CSS

.box {height:100px;width:100px;float:left;} 
.box:nth-child(odd) {clear:left;} 
.green {background:green;} 
.red{background:red;} 
.blue {background:blue;} 
.yellow {background:yellow;}

HTML

<div class="box green">BOX 1</div> 
<div class="box red">BOX 2</div> 
<div class="box blue">BOX 3</div> 
<div class="box yellow">BOX 4</div>

演示：http://jsfiddle.net/YSP2S/

请记住，这将不会为Internet Explorer工作。您也可以使用conditional comment和javascript来实现与Internet Explorer相同的功能。

来源

2011-02-24 15:27:35 Sotiris

+1，工作正常，只要他的身高*不是*不同（就像他的照片一样）。 – thirtydot 2011-02-24 15:33:09

@thirtydot你是对的。嗯，否则我不认为存在任何纯粹的CSS解决方案，只有这样的JavaScript你建议。 – Sotiris 2011-02-24 15:47:43

问题是，盒子的高度不同，因为它们是文本预览，而文本总是不同的长度，所以看起来像我将不得不使用JavaScrip/jQuery作为thirtydot建议......但仍然有帮助，谢谢！我还没有看到jsfiddle.net，直到现在，分享代码示例看起来很棒！ – wowpatrick 2011-02-24 16:04:51

将浮动元素直接放在彼此的下方

回答

相关问题