定位元素（不同的大小）彼此相邻

Question

我有很多不同大小和宽度的div。我想自动将它们放在另一个div中，并将它们定位为：

任何人都知道我应该使用什么css属性？我试过浮动+显示（几种组合），没有什么对我有用 - 我有一行div - ＆gt;很多空间（因为一个大元素） - ＆gt;下一行 - ＆gt;等等...等等......

Answer 1

如果不使用Flexbox，你会发现很难实现这种布局。

Flexbox layout example

您可以使用Masonry之类的JS插件来实现布局。

Answer 2

如果我理解正确，你想要做的是将它们放在一个具有一定大小的容器中（可能根据其内容扩展高度），然后按照你显示的方式排列它们。我能想到的最简单的方法是使用Twitter Bootstrap。它有一个container类，然后你可以在div中对齐你的元素，它也会使它自动响应。

提示：尽可能避免使用position: absolute和height:，因为它会影响您网站的流量。

不要忘记在需要时清除浮动元素。