如何將div與另一個“ div”中的“ inline-block”屬性對齊？

Question

如何在.square內部對齊#about_container ？

他們都應該坐下10px從頂部#about_container ，有或無文字。

 #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 ，以使其不繼承.square級的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>