“向左浮动”？使div从容器的顶部开始并向下扩展

Question

我的div较大，但div较小。当前是这样的：

但是，我希望它看起来像这样： 基本上，我希望“ div容器”内的所有div上下浮动，而不是左右浮动。也许浮动不是我想要的东西。我应该如何处理这个问题？

在这里您可以自己看到：https://jsfiddle.net/sebastian3495/ea6L08bu/9/

html

<div class="container">
  <div class="box" style="background: yellow;"></div>
  <div class="box" style="height: 200px;background: brown;"></div>
  <div class="box" style="background: green;"></div>
  <div class="box" style="background: purple;"></div>

</div>

css

.container {
  background: red;
  width: 500px;
  height: 500px;
  border: 2px solid black;
  overflow: hidden;
}

.box {
  display: inline-block;
  height: 100px;
  width: 100px;
}

Answer 1

如果您使用的是inline-block，则只需要使用vertical-align:top

.container {
  background: red;
  width: 500px;
  height: 500px;
  border: 2px solid black;
  overflow: hidden;
}

.box {
  display: inline-block;
  height: 100px;
  width: 100px;
  vertical-align: top;
}

<div class="container">
  <div class="box" style="background: yellow;"></div>
  <div class="box" style="height: 200px;background: brown;"></div>
  <div class="box" style="background: green;"></div>
  <div class="box" style="background: purple;"></div>

</div>