将浏览器宽度的变化置于彼此之下

Question

我有一组div，我希望在浏览器窗口变小时以某种方式定位。当div在彼此之下移动时，我希望它们一直向左推，并且在前一行的div下面没有额外的空间。根据内部的内容多少，div的高度可以不同。

这是我的div的css：

div {
  display: inline-block;
  float: left;
  background-color: #fff;
  width: 190px;
  max-height: 450px;
  margin: 10px;
  border: 1px solid black;
}

请查看这些图像以获取视觉参考。

Answer 1

使用flexbox，flex-wrap：wrap，这是做许多事情的最简单方法，请检查： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Bootstrap Grid是另一种选择，您可以研究它如何工作以更好地理解该逻辑。

https://getbootstrap.com/docs/3.3/examples/grid/