如何避免这些 div 中的上边距？答案

【问题标题】：How to avoid the top margin in these divs?如何避免这些 div 中的上边距？
【发布时间】：2015-06-07 01:32:40
【问题描述】：

我需要内联显示几个 div。由于所有 div 必须具有相同的视口宽度，并且它们必须在同一行，我使用的是 white-space: nowrap 在容器中。

.container {
    white-space: nowrap;
}
.container > div {
    background-color: red;
    width: 100%;
    border: 2px solid;
    display: inline-block;
    padding: 20px;
    text-align: justify;
}

<div class="container">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>tempor incididunt ut labore et dolore magna aliqua.
        <p></p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div>OPTION 2</div>
    <div>OPTION 3</div>
    <div>OPTION 4</div>
    <div>OPTION 5</div>
    <div>OPTION 6</div>
    <div>OPTION 7</div>
    <div>OPTION 8</div>
    <div>OPTION 9</div>
    <div>OPTION 10</div>
</div>

问题是只有第一个div在正常顶部正确显示位置。其他 div 显示的上边距过多。我怎样才能防止这种情况发生？

我希望所有的 div 都显示在相同的顶部位置。

提前致谢

【问题讨论】：

标签： html css

【解决方案1】：

你可以为 div 使用垂直对齐属性

.container {
  white-space: nowrap;
}
.container > div {
  vertical-align: top;
  background-color: red;
  width: 100%;
  border: 2px solid;
  display: inline-block;
  padding: 20px;
  text-align: justify;
}

<div class="container">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>tempor incididunt ut labore et dolore magna aliqua.
    <p></p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div>OPTION 2</div>
  <div>OPTION 3</div>
  <div>OPTION 4</div>
  <div>OPTION 5</div>
  <div>OPTION 6</div>
  <div>OPTION 7</div>
  <div>OPTION 8</div>
  <div>OPTION 9</div>
  <div>OPTION 10</div>
</div>

【讨论】：

【解决方案2】：

将vertical-align: top 添加到您的规则中

.container {
    white-space: nowrap;
}
.container > div {
    background-color: red;
    width: 100%;
    border: 2px solid;
    display: inline-block;
    padding: 20px;
    text-align: justify;
    vertical-align: top;
}

<div class="container">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>tempor incididunt ut labore et dolore magna aliqua.
        <p></p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div>OPTION 2</div>
    <div>OPTION 3</div>
    <div>OPTION 4</div>
    <div>OPTION 5</div>
    <div>OPTION 6</div>
    <div>OPTION 7</div>
    <div>OPTION 8</div>
    <div>OPTION 9</div>
    <div>OPTION 10</div>
</div>

【讨论】：