Question

我正在尝试对面板进行响应式设计，该面板由一个图像和另一个具有其自身内部元素的容器并排构成。

我有一个父div，并且在img和另一个div标签中。这两个子标记具有浮动块，宽度为％，可以正常工作。

问题是，当我缩小页面时，img缩小以遵守％宽度规则，因此它的高度也是如此，它应该保持这种方式，但是侧面的div不会将其高度更改为相同作为同级图片。

我将它们包裹在另一个div中，然后将内部div放高：100％希望可以解决问题，但是什么也没做。

我想让右边的div根据左边的图像更改其高度。

.img-container {
    display: block;
    width: 59%;
    float: left;
}
    
img {
    width: 100%;
}

.product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 41%;
    float: left;
    background-color: #e4d233;
}
      
.product-img {
    width: 45%
}

<div class="imgProductContainer">
	<div class="img-container">
		<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
	</div>
	<div class="product-container">
		<img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
		<p><span id="product2Name"></span><br>
		<span>2.00 €</span></p>
	</div>
</div>

Answer 1

.imgProductContainer {
  display: flex;
  flex-direction: row;
  /*
    justify-content: center;
    align-items: center;
  */
}

.img-container {
  width: 59%;
}

img {
  width: 100%;
}

.product-container {
  width: 41%;
  background-color: #e4d233;
}

.product-img {
  width: 45%
}

<div class="imgProductContainer">
  <div class="img-container">
    <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />
  </div>
  <div class="product-container">
    <img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
    <p><span id="product2Name"></span><br>
      <span>2.00 €</span></p>
  </div>
</div>

我猜那应该是什么样子？我不确定什么是.product-img类，所以我用它替换了productImg类。

我还删除了所有刚刚使主容器变成其子项对齐的flex框的浮子，如果您在此处需要其他内容，则应深入研究flexbox。

希望对您有帮助

Answer 2

您可以使用CSS Grid强制使容器的高度相等：

.img-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
img {
    width: 100%;
}
.imgProductContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #e4d233;
}
      
.product-img {
    width: 100%;
}

<div class="imgProductContainer">
	<div class="img-container">
		<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
	</div>
	<div class="product-container">
		<img id="product2Img" class="productImg" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
		<p><span id="product2Name"></span><br>
		<span>2.00 €</span></p>
	</div>
</div>

具有与同级图片相同高度的div

2 个答案: