如何将一个 div 与另一个"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>