Question

图像无法以320px宽度的屏幕尺寸对齐到两列中。即使在最小化图像的宽度和高度之后，一张图像仍覆盖了整行，我需要连续两张图像及其内容。

.row {
  width: 20rem;
  vertical-align: unset;
}
.row img {
  max-width: 50%;
  max-height: 6.25rem;
  position: relative;
}
.product-bottom h3,
.product-bottom h5,
.product-bottom,
.overlay {
  max-width: 45%;
  max-height: auto;
}
.overlay {
  font-size: 2rem;
}

<div class = "row">
  <div class = "col-md-4">
  <div class = "product-top">
  <img src = "bestcar.jpeg" class="pimg">
  <div class = "overlay">
  <button type ="button" class= "btn btn-secondary"
  title="Quick Shop"> <i class= "fa fa-eye"></i>
  </button>
  <button type ="button" class= "btn btn-secondary"
  title="Add to wishlist">
  <i class="fa fa-heart" aria-hidden="true"></i>
  </button>
  <button type="button" class= "btn btn-secondary"
  title="Add to Cart"> <i class="fa fa-shopping-cart"></i>
  </button>
  </div>
  </div>
  <div class="product-bottom text-center">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <!--<i class="fa fa-star"></i>
  <i class="fa fa-star"></i>-->
  <i class="fa fa-star-half"></i>
  <i class="fa fa-star"></i>
  <h3>Honda</h3>
  <h5>$65000.00</h5>
  </div>
</div>
 <div class="col-md-4">
<div class = "product-top">
<img src = "bg4.jpeg"class="pimg">
<div class = "overlay">
<button type ="button" class= "btn btn-secondary"
title="Quick Shop"> <i class= "fa fa-eye"></i>
</button>
<button type ="button" class= "btn btn-secondary"
title="Add to wishlist">
<i class="fa fa-heart" aria-hidden="true"></i>
</button>
<button type="button" class= "btn btn-secondary"
title="Add to Cart"> <i class="fa fa-shopping-cart"></i>
</button>
</div>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
<i class="fa fa-star"></i>
<h3>Mario Skin care</h3>
<h5>$50.00</h5>
</div>
</div>
</div>
</div>

当我运行此代码时，图像在列中对齐，但我希望它们在行中对齐。协助请

如何在320px屏幕媒体查询中将两张图片合并为一行

0 个答案: