将浮动元素直接放在彼此下面 [英] Position floated elements directly under each other

问题描述

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

因为布局必须内置到CMS中，所以我不能将Box 1,3和2,4放在一个分隔符div中。有没有办法实现这种行为没有额外的包装元素？ （正常的浮动行为不工作，显示inline / inline-block也不会做的伎俩。）或者是一些JavaScript需要构建这样的布局？

解决方案

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

我已在此之前发布过此答案： css对齐问题

我放弃了并使用了一个jQuery插件
过去的东西
类似：

jQuery Masonry

一张图片价值千言万语：

>

I would like to display a row of tow divs next to each other while in the next row, the next div sits directly under the last one. Like this:

Because the layout has to be built into an CMS, I can't put Box 1,3 and 2,4 in a separat div. Is there a way to achieve this kind of behavior without extra wrapping elements? (Normal float behavior doesn't work, display inline/inline-block also doesn't do the trick.) Or is some JavaScript required to build a layout like this?

解决方案

Because of the different heights, this looks like the problem where I still haven't found a general purpose pure CSS technique to handle it properly, despite trying really hard.

I've posted this answer before: css alignment question

I've given up and used a jQuery plugin to do this in the past for something similar:

jQuery Masonry

A picture is worth a thousand words:

这篇关于将浮动元素直接放在彼此下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！