将元素定位在DIV中并使它们堆叠

Question

新成员即将来临。

我是HTML和CSS的新手。我是一名设计师，我对HTML和CSS感到惊讶，我正在研究div中位置元素的方法。最近我遇到了一些问题。我试图使元素适合上面的空格，但似乎有一条线划分了块的两个部分。这是一张图片来说明我正在经历的事情。

Problem

我的标记是：

<section style="max-width:470px; background-color:green;">

<div class="bloco1">
    hello
</div>

<div class="bloco2">
    hi
</div>

<div class="bloco3">
    hey
</div>

<div class="bloco3">
    I want this elements to fit those spaces above
</div>

<div class="bloco1">
    I want this elements to fit those spaces above
</div>

<div class="bloco2">
    I want this elements to fit those spaces above
</div>

CSS就是：

     .block1 {
 display:inline-block;
  width:150px;
  height:200px;
  background-color:gray;
 }

 .block2 {
  display:inline-block;
  width:150px;
  height:100px;
  background-color:yellow;
 }

  .block3 {
  display:inline-block;
  width:150px;
  height:180px;
  background-color:blue;
 }

所以，我试图搞砸位置，但效果并不理想。我该怎么办？