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

为vertical-align:top元素应用inline-block，因为默认对齐方式是基线。它将解决问题。

.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/

CSS表现得很奇怪

2 个答案: