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

时间:2011-02-24 15:17:48

标签: css positioning css-float

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

enter image description here

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

2 个答案:

答案 0 :(得分:7)

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

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

  

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

     

jQuery Masonry

     

一张图片胜过千言万语:

     

enter image description here

答案 1 :(得分:6)

您可以使用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的相同功能。