html - CSS Vertical Align Staggered ...应该在顶部

Question

我有一个垂直对齐问题...我有几个 div 框，所有框都带有 display:inline-block ...并且这些框在顶部垂直对齐。但是，它们都是垂直交错的。

而且，奇怪的是，当我选择网页区域时，我看到框之间的元素正在拉伸(stretch)该区域......但实际代码中没有其他元素(没有分隔符 div)。

/* Related */

#related-wrap {
  width: 100%;
  margin: 20px 0;
}
h2.related-title {
  /* See Author */
}
#related-container {
  width: 100%;
  margin: 10px 0;
  vertical-align: top;
  text-align: center;
  /* background-color:#f5f5f5; */
}
.related-box {
  width: 170px;
  display: inline-block;
  padding: 10px;
  margin: 10px;
  /* background-color:#FAFAFA; */
}
.related-box-first {} .related-box-last {} .related-img {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin-bottom: 10px;
}
.related-img img {
  width: 100%;
  height: auto;
}
.related-txt h3,
.related-txt h3 a {
  width: 100%;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding: 0 5px;
}

<div id="related-wrap">
  <h2 class="related-title">Related Posts</h2>
  <div id="related-container">

    <div class="related-box related-box-first">
      <div class="related-img">
        <a href="/fun-affordable-rugs/">
          <img width="150" height="150" src="images/cce944801a98-150x150.jpeg" class="attachment-thumbnail wp-post-image" alt="cce944801a98" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/fun-affordable-rugs/">Fun Affordable Rugs</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

    <div class="related-box">
      <div class="related-img">
        <a href="/dancing-water-speakers/">
          <img width="150" height="112" src="images/Dancing-Water-Speakers-200x112-150x112.jpg" class="attachment-thumbnail wp-post-image" alt="dancing water speakers" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/dancing-water-speakers/">Dancing Water Speakers</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

    <div class="related-box">
      <div class="related-img">
        <a href="/12-years-a-slave/">
          <img width="135" height="150" src="images/00007402-135x150.jpg" class="attachment-thumbnail wp-post-image" alt="12 years a slave" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/12-years-a-slave/">12 Years A Slave</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

    <div class="related-box related-box-last">
      <div class="related-img">
        <a href="/yogurt-granola-parfaits/">
          <img width="150" height="150" src="images/Yogurt-Parfaits-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="yogurt, granola, fruit, parfaits, bridal" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/yogurt-granola-parfaits/">Yogurt &#038; Granola Parfaits</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

  </div>
  <!-- #related-container -->
</div>
<!-- #related-wrap -->

Answer 1

将vertical-align: top; 添加到.related-box: https://jsfiddle.net/tcv0pffa/

您还对 .related-box 应用了边距，删除这个以去除空格:https://jsfiddle.net/tcv0pffa/1/

.related-box {
    width:170px;
    display:inline-block;
    vertical-align: top;
    padding:10px;
}