javascript - 定位div with display : inline-block. 如何依次自适应高度？

Question

我一直在寻找并尝试做一件简单的事情，但我无法实现。问题是我想将显示内联 block 应用于某些 div，但将它们一个接一个地对齐。喜欢照片。

所以问题是数字 4 和 5 位于带有显示内联 block 的 1 之后:

那我该怎么办呢？谢谢!

.post-it {
  background-color: #F00;
  height: 140px;
  padding: 1em;
  width: 150px;
  display: inline-block;
  margin: 0 1.3em 1.5em 0;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
}

 .title {
   font-size: 2em;
   font-weight: bold;
   line-height: 1em;
   margin-bottom: .2em;
}

#today {
  height: 300px;
}

<div>
  <div class="post-it" id="today">
    <header>
      <div class="title">
        Day 25
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 26
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 27
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 28
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 29
      </div>
      <hr>
    </header>
  </div>
</div>

Answer 1

尝试在我称之为#calendar 的外部 div 上设置固定宽度，然后将属性 float: left 添加到您的 .post-it 类。希望对您有所帮助!

.post-it {
  background-color: #F00;
  height: 140px;
  padding: 1em;
  width: 150px;
  display: inline-block;
  margin: 0 1.3em 1.5em 0;
 float: left;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
}

 .title {
   font-size: 2em;
   font-weight: bold;
   line-height: 1em;
   margin-bottom: .2em;
}

#today {
  height: 300px;
}
#calendar {
  width: 800px;
}

<div id="calendar">
  <div class="post-it" id="today">
    <header>
      <div class="title">
        Day 25
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 26
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 27
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 28
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 29
      </div>
      <hr>
    </header>
  </div>
</div>