Question

我需要内联显示几个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都显示在相同的顶部位置。

提前致谢

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用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>

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

2 个答案: