CSS Vertical Align Staggered ......应该是顶级的

Question

我有垂直对齐问题...我有几个div框，都有显示：内联块...并且框垂直对齐顶部。但是，它们都是垂直交错的。

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

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

sudo yum remove php-mysql
sudo yum install php-mysqlnd
sudo yum reboot

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;
}

Answer 2

OnPropertyChanged es应该是.related-box，而不是vertical-align: top。

您还将#related-container应用于margin es的所有方面。这就是为什么他们之间有一个很大的空间。只将.related-box放在一边，这样就不会加倍。

使用margin元素，它们之间会有空格字符。这使得inline-block es空格比预期的多4个像素。

要解决此问题，请将.related-box设为#related-container。

Answer 3

好的，那里有两个主要问题。

1. vertical-align应设置在inline-block项目上，而不是容器上。

2. inline-block也renders white space，您可以使用字体大小技巧轻松摆脱它 - 在容器上设置font-size:0和font-size:16px等等该项目。

http://jsfiddle.net/vhmn1ok7/