html - 随着浏览器宽度的变化将 div 置于彼此之下

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/