変な振る舞いをしているCSS

Question

div1をdiv1の中に置いている瞬間、div1はいくらか乱数だけ落ちます。私がdiv1内にdiv3を配置してから何が起きているのか分かりません。うまく動いています。

.propertyOverview { 
 
    height: 430px; 
 
    width: 357px; 
 
    margin-right: 10px; 
 
    margin-top: 15px; 
 
    background-color: white; 
 
    display: inline-block; 
 
    border: solid 1px #E8E8E8; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
} 
 

 
.propertyImage { 
 
    height: 260px; 
 
    width: 355px; 
 
    background-color: #a29c9c; 
 
    border-radius: 5px 5px 0 0; 
 
    margin-left: -15px;  
 
}

<div class="col-sm-10 col-sm-offset-1"> 
 
    <div class="container propertyOverview"> 
 
    <div class="propertyImage"></div> 
 
    <div> 
 
     Sample text 
 
    </div> 
 
</div>

Screen shot of what I'm looking at

Answer 1

デフォルトのアラインメントは、ベースラインであるため、inline-block要素のvertical-align:topを適用します。問題を解決します。

.propertyOverview { 
    height: 430px; 
    width: 357px; 
    margin-right: 10px; 
    margin-top: 15px; 
    background-color: white; 
    display: inline-block; 
    vertical-align:top; /* Added this one for alignment */ 
    border: solid 1px #E8E8E8; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    } 

Answer 2

これはあなたを助けるかもしれない：

.propertyOverview{ 
    height: 430px; 
    width: 357px; 
    margin-right: 10px; 
    margin-top: 15px; 
    background-color: white; 
    display: inline-block; 
    vertical-align:top; 
    border: solid 1px #E8E8E8; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
} 
.propertyImage { 
    height: 260px; 
    width: 357px; 
    background-color: #a29c9c; 
    border-radius: 5px 5px 0 0; 
    margin-left:0;  
    } 

https://jsfiddle.net/jungrupak/ptqbbugw/