推下了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以解决问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试添加float:left。这将解决您的问题。

.article {
    background-color: #2B2B2B;
    max-width: 100px; 
    float: left;
}

Answer 3

添加

vertical-align:top;

到

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 

所以你有

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

Answer 4

将float: left添加到您的列（所有文章）。这解决了这个问题。请检查以下代码段并提琴。

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
  display: inline-block;
  width: 100px;
  max-width: 100px;
  background-color: lightblue;
  height: 200px;
  float:left;
}

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

Here is the fiddle