html - CSS 表现异常

Question

当我将 div2 放在 div1 中时，div1 只是随机下降了一些。不确定这里发生了什么，因为我只是将 div3 放在 div1 中并且它工作得很好。

.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;
  }