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

Question

我想在下一行旁边显示一行拖曳div,下一个div直接位于最后一个div下面.像这样:

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

Answer 1

由于不同的高度,这看起来像我仍然没有找到一个通用的纯CSS技术来正确处理它的问题,尽管尝试非常努力.

我之前发过这个答案: css对齐问题

我已经放弃并使用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.您也可以使用条件注释和javascript来实现Internet Explorer的相同功能.