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

Question

I have a larger div with smaller divs in it. This is how it currently look:

However, I want it to look like this: Basically, I want all the divs inside the "div-container" to float up and left as opposed to left and down. Perhaps float is not the thing I am looking for. How should I go about this issue?

Here you can see for yourself: 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

If you are using inline-block then you just need to use 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>