CSS - 浮动项目的矩阵

Question

布局0显示了如何使用简化的css视图实现此布局。 我需要有关如何创建布局1和2的帮助/建议/想法。 这些块可以按任何顺序渲染，它们是固定的宽度（分别为25％或50％ - 如布局0）...工作中的扳手是没有预定义的高度。

我更喜欢只有CSS的解决方案，每个布局都有自己的父/容器div，所以如果定位最适合一行并且漂浮得更好，那么就这样吧。

明信片上的答案......谢谢所有

P.S。我是否可以避免将答案推荐给js librarys，例如http://masonry.desandro.com/ ...

Answer 1

我在div中包含2个列（2个小div，1个大width: 25%）并将它们全部float: left（除了包裹的div）。

Answer 2

将元素放在容器中绝对位置，只需使用CSS设置放置位置，就可以将它们放在任何位置，如下所示：

FIDDLE

Answer 3

你也可以用漂浮物来做，虽然在布局1你必须应用一点边缘'技巧'（除非我忽略了什么）

Fiddle

乍一看也许有点难以理解。如果不是绝对必要，我不是绝对定位的忠实粉丝。虽然在这种情况下我不得不承认@adeneo解决方案可能是最干净的方法。