jquery - CSS - 浮动项目矩阵

Question

布局 0 展示了我如何通过简化的 CSS 视图来实现此布局。我需要有关如何创建布局 1 和 2 的帮助/建议/想法。这些块可以按任何顺序呈现，并且它们的宽度是固定的（分别为 25% 或 50% - 如布局 0 所示）...工作中的扳手他们没有预定义的高度吗？

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

明信片上的答案...谢谢大家

PS 我可以避免将我引向 js 库的答案，例如http ://masonry.desandro.com/ ...

Answer 1

我将 2 列包装在一个 div 中（2 个小 div 在 1 个大的 div 中width: 25%）并将它们全部制作float: left（除了被包装的 div）。

Answer 2

将元素定位在绝对容器中，您可以通过使用 CSS 设置位置来将它们放置在您喜欢的任何位置，如下所示：

小提琴

Answer 3

你也可以只用浮动来做到这一点，虽然在布局 1 中你必须应用一点边距“技巧”（除非我忽略了某些东西）

小提琴

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