HTML div 容器向下推

Question

我想创建一个包含 4 列的页面。这些列内应该是其他 div。现在我在第一列中添加了一个 div，但整个列 div 被推了下来。我该如何解决？

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
  display: inline-block;
  width: 100px;
  max-width: 100px;
  background-color: lightblue;
  height: 200px;
}
.articleRow1 {
  margin-right: 20px;
}
.articleRow2 {
  margin-right: 20px;
}
.articleRow3 {
  margin-right: 20px;
}
/*---
#####
---*/

.article {
  background-color: #2B2B2B;
  max-width: 100px;
}
.article > .articleImageContainer > img {
  max-height: 100px;
  max-width: 100px;
  display: block;
}
.article > .articleTitle {
  padding: 10px;
  color: white;
}

<section>
  <div class="articleRow1">
    <div class="article">
      <div class="articleImageContainer">
        <img src="1.jpg" />
      </div>

      <div class="articleTitle">
        Sizzix 482483
      </div>
    </div>
  </div>

  <div class="articleRow2">
  </div>

  <div class="articleRow3">
  </div>

  <div class="articleRow4">
  </div>
</section>

这是一个JFiddle .

Answer 1

您在第一篇文章中的 img 会影响基线，从而将具有内联布局的第一个 div .articleRow1 向下推。您可以将 vertical-align css 属性显式设置为 top 以解决此问题。

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
  display: inline-block;
  width: 100px;
  max-width: 100px;
  background-color: lightblue;
  height: 200px;
  vertical-align: top;
}
.articleRow1 {
  margin-right: 20px;
}
.articleRow2 {
  margin-right: 20px;
}
.articleRow3 {
  margin-right: 20px;
}
/*---
#####
---*/

.article {
  background-color: #2B2B2B;
  max-width: 100px;
}
.article > .articleImageContainer {} .article > .articleImageContainer > img {
  max-height: 100px;
  max-width: 100px;
  display: block;
}
.article > .articleTitle {
  padding: 10px;
  color: white;
}

<section>
  <div class="articleRow1">
    <div class="article">
      <div class="articleImageContainer">
        <img src="1.jpg" />
      </div>

      <div class="articleTitle">
        Sizzix 482483
      </div>
    </div>
  </div>

  <div class="articleRow2"></div>

  <div class="articleRow3"></div>

  <div class="articleRow4"></div>
</section>