将浮动元素直接放置在彼此之下

Question

我想在下一行旁边显示一行两个div，下一个div直接位于最后一个div下面。像这样：

因为布局必须内置到CMS中，所以我不能将Box 1,3和2,4放在一个单独的div中。有没有办法在没有额外包装元素的情况下实现这种行为？ （正常浮动行为不起作用，显示内联/内联块也不起作用。）或者是否需要一些JavaScript来构建这样的布局？

Answer 1

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

我之前发布了这个答案：css alignment question

  

我已经放弃并使用了jQuery插件   过去做某件事   类似：

     

jQuery Masonry

     

一张图片胜过千言万语：

     

Answer 2

您可以使用nth-child(odd) clear float: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的相同功能。