logo标签列表

CSS垂直对齐交错排列...应该是顶部

htmlcss
3
我遇到了垂直对齐的问题...我有几个带有display:inline-block的div盒子，它们都是垂直对齐顶部的。然而，它们在垂直方向上都错开了。
奇怪的是，当我选择网页的区域时，我看到了在盒子之间拉伸区域的元素...但实际代码中没有额外的元素（没有分隔符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 -->

2
这并不能回答你的问题，但我真的很好奇这四件事情怎么可能相关。听起来像是一个很棒的笑话开头。 - Woodrow Barlow
vertical-align:top? - j08691
j08691 ... vertical-align:top。是的。您具体有什么问题？ - Jabbamonkey
Woodrow Barlow...他们应该在博客的同一类别中（我没有设置它们的分类）。 - Jabbamonkey
3个回答
3
很好，我认为 vertical-align:top 是与容器中的项目有关，而不是项目本身。您有什么想法吗？当我选择该区域时，“divider”元素是什么？ - Jabbamonkey
2

.related-box应该使用vertical-align:top，而不是#related-container。

您还在所有侧面应用了margin到.related-box。这就是为什么它们之间有一个大的空间。只将margin放在一侧，这样它就不会加倍。

对于inline-block元素，它们之间会有一个空格字符。这使得.related-box相距的空间比预期多出4像素。

要解决此问题，使#related-container具有font-size:0。

1

好的，有两个主要问题。

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

  2. inline-block 还会 渲染空白, 您可以使用字体大小技巧轻松解决它 - 在容器上设置 font-size:0，在项目上设置 font-size:16px 或类似大小。

http://jsfiddle.net/vhmn1ok7/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接