別の 'div'の中の 'inline-block'プロパティでdivを整列する方法は？

Question

#about_containerの中に.squareを配置するにはどうすればよいですか？

の先頭から、テキストの有無にかかわらず、すべて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

.squareクラスにvertical-align: topを追加します。

テキストが幅の最後に達したときに破損させたい場合は、ルールをその親から継承しないように、.squareクラスにwhite-space: normalを設定することができます。

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