有一个与兄弟图像高度相同的 div答案

【问题标题】：Have a div with the same height as a sibling image有一个与兄弟图像高度相同的 div
【发布时间】：2018-09-21 15:38:00
【问题描述】：

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

我有一个父 div 和一个 img 和另一个 div 标签。这两个子标签是浮动块，宽度为 % 并且有效。

问题是，当我缩小页面时，img 会缩小以遵守 % width 规则，它的高度也是如此，它应该保持这种状态，但侧面的 div 不会将其高度更改为相同作为兄弟图像。

我将它们包裹在另一个 div 中，并将内部 div 放在 height: 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>

【问题讨论】：

是否有理由为产品容器 div 设置了固定高度？删除它，你应该得到你正在寻找的东西。
哎呀！这是我试图解决我忘记保留帖子的问题之一。可悲的是，这仍然不能解决问题，img-container 和 product-container 有不同的高度 :(

标签： html css

【解决方案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 box，其子容器对齐，如果你想要其他东西，你应该更深入地查看 flexbox。

希望对你有帮助

【讨论】：

是的，这样的类是一个错误，但我的最终结果仍然是 .img-container 和 .product-container 具有相同的高度，基于左侧图像的高度，当页面缩小了，你的代码似乎不是我想要的，希望现在更清楚
我编辑了我的答案，。我刚刚在最顶部注释掉了 2 行，现在两个 div 的高度相同，基于哪个更高
@Dirk // ... 不是CSS 中的有效评论，在CSS 中发表评论的唯一方法是使用/* ... */。
如果您编辑答案替换错误的 cmets，那就太好了。
确定没问题

【解决方案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>

【讨论】：