CSS：使div位于与其顶部div底线相关的顶部位置（仅限CSS）

Question

我很难解释我需要什么，所以我为此包含了这张图片。我需要得到这样的东西

我知道我可以使用插件获得此功能。我想知道这是否仅适用于css（也适用于IE8）

Answer 1

我为你的答案找到了解决方案。

检查此链接： http://cssdeck.com/labs/full/nuauntmo

p { margin: 0; padding: 0 }

.grid-container {
  width: 100%;
  text-align: center;
  margin-top: 15px;
}

.third {
  display: inline-table;
  width: 30%;
}

.grid {
  border: 1px solid black;
  margin: 10px 0;
}

.grid1 {
  height: 200px;
  background: #ddd;
}

.grid2 {
  height: 100px;
  background: #3434ff;
}

.grid3 {
  height: 100px;
  background: #3434ff;
}

.grid4 {
  height: 350px;
  background: #ff0f00;
}

.grid5 {
  height: 200px;
  background: #ccc;
}

.grid6 {
  height: 200px;
  background: #3434ff;
}

<div class="grid-container">
  <div class="third">
    <div class="grid grid1">
      <p>Grid 1</p>
    </div>
    <div class="grid grid2">
      <p>Grid 2</p>
    </div>
  </div>
  <div class="third">
   <div class="grid grid3">
      <p>Grid 3</p>
    </div>
    <div class="grid grid4">
      <p>Grid 4</p>
    </div>
  </div>
  <div class="third">
    <div class="grid grid5">
      <p>Grid 5</p>
    </div>
    <div class="grid grid6">
      <p>Grid 6</p>
    </div>
  </div>
</div>