html - 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>