我想在下一行旁边显示一行两个div,下一个div直接位于最后一个div下面。像这样:
因为布局必须内置到CMS中,所以我不能将Box 1,3和2,4放在一个单独的div中。有没有办法在没有额外包装元素的情况下实现这种行为? (正常浮动行为不起作用,显示内联/内联块也不起作用。)或者是否需要一些JavaScript来构建这样的布局?
答案 0 :(得分:7)
由于不同的高度,这看起来像我仍然没有找到一个通用的纯CSS技术来正确处理它的问题,尽管尝试真的很难。
我之前发布了这个答案:css alignment question
我已经放弃并使用了jQuery插件 过去做某件事 类似:
一张图片胜过千言万语:
答案 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的相同功能。