html - 如何将 div 与另一个 'inline-block' 中的 'div' 属性对齐？

Question

如何对齐 #about_container 中的 .square？

它们都应该位于距离 #about_container 顶部 10px，有或没有文字。

#about_container {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: rgba(146, 106, 106, 1);
  margin-bottom: 50px;
  overflow-x: scroll;
  white-space: nowrap;
  overflow-y: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
}

.square {
  display: inline-block;
  height: 180px;
  width: 180px;
  background-color: white;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 5px;
  font-size: 10px;
  text-align: center;
  word-wrap: break-word;
}

<div id="about_container">
  <div class="filler_space"></div>
  <div class="square">
    <p>Well here hfdasjkhfidi</p>
  </div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="filler_space"></div>
</div>

Answer 1

将 vertical-align: top 添加到 .square 类。

如果您希望文本在到达宽度末端时中断，您可以在 .square 类上设置 white-space: normal ，这样它就不会中断'从其父级继承 white-space: nowrap 规则。

#about_container {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: rgba(146, 106, 106, 1);
  margin-bottom: 50px;
  overflow-x: scroll;
  white-space: nowrap;
  overflow-y: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
}

.square {
  display: inline-block;
  height: 180px;
  width: 180px;
  background-color: white;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 5px;
  font-size: 10px;
  text-align: center;
  word-wrap: break-word;
  vertical-align: top;
  white-space: normal;
}

<div id="about_container">
  <div class="filler_space"></div>
  <div class="square">
    <p>Meow mix delivers chicken and liver. Meow mix delivers chicken and liver.</p>
  </div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="filler_space"></div>
</div>