将浮动元素直接定位在彼此下方[重复]答案

【问题标题】：Position floated elements directly under each other [duplicate]将浮动元素直接定位在彼此下方[重复]
【发布时间】：2012-05-11 22:00:49
【问题描述】：

我想显示一排相邻的两个 div，而在下一行中，下一个 div 位于最后一个的正下方。像这样：

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

【问题讨论】：

标签： css positioning css-float

【解决方案1】：

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

我之前已经发布过这个答案：css alignment question

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

jQuery Masonry

一张图抵千言：

【讨论】：

+1 好像没有纯css解决方案
效果很好！其实就是我要找的东西！可惜我没有旧帖，但感谢您再次发布。

【解决方案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 实现相同的功能。

【讨论】：

+1，工作正常，只要他的身高没有不同（就像他们在他的照片中一样）。
@thirtydot 你是对的。嗯，否则我认为不存在任何纯 css 解决方案，只有您建议的这样的 javascript。
问题是框的高度是不同的，因为它们是带有文本的预览后，并且文本的长度总是不同，所以看起来我会有使用 JavaScrip/jQuery 作为 30 点建议...但仍然有帮助，谢谢！而且我到现在还没有看到 jsfiddle.net，看起来很适合分享代码示例！