html - 图片在我的 DIV 中没有对齐

Question

不确定这里发生了什么。我重新抓取了图像以匹配 div 的宽度，但不知何故它仍然与它不对齐。我在此处将问题上传到 codepen。尝试调整边距，但它仍然没有改变行为。

.propertyOverview.mapView {
  height: 430px;
  width: 600px;
  background-color: white;
  display: inline-block;
  border: solid 1px #E8E8E8;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  vertical-align: top;
  margin-left: 50px;
}

.propertyImage.mapViewPic {
  height: 260px;
  width: 600px;
  border-radius: 5px 5px 0 0;
}

.quickDetails {
  margin-top: 10px;
}

.propertyOverview p {
  margin: 0px 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .7px;
  font-family: 'Lato', sans-serif;
  line-height: 30px;
  color: #272635;
}

.propertyOverview .priceDetail {
  font-weight: 900;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  color: #272635;
}

.quickFacts {
  border-top: solid 1px #E8E8E8;
  padding-top: 5px;
  margin-top: 12px;
  color: #272635;
  font-size: 15px;
}

https://codepen.io/insivika/pen/PEzxPK

Answer 1

据我了解，我猜您正在尝试拉伸(stretch)图像以占据容器的整个宽度。这是问题所在:

<div class="propertyImage mapViewPic">
    <img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" 
     alt="sample_Property_Map1" alt="">
</div>

.propertyImage.mapViewPic {
    height: 260px;
    width: 600px;
    border-radius: 5px 5px 0 0;
}

您已经为图像的父容器指定了一个类并在 CSS 中定位它。

而是这样做。删除多余的容器 div

<div class="propertyOverview mapView">
    <img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" 
     alt="sample_Property_Map1" alt="" class="propertyImage">
</div>

像这样更新你的 CSS。

.propertyOverview .mapViewPic {
    width: 600px;
    border-radius: 5px 5px 0 0;
}