如果其中有一张宽度设置为 100% 的图片，则使所有列的高度相同

Question

>我正在尝试使最左边的列与其他两列的高度相同，其中有图片的宽度设置为 100%。如果我在父div 中指定高度，我可以这样做，但随后图像没有响应。.下面是我正在使用的代码。

.gcolumn {
float: left;
width: 33.33%;
height: auto;
display: table-cell;
overflow: hidden;
z-index: 1;
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.gtext {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
height: 100%;
right: 0;
top: 0;
}
.grow {
display: table;
overflow: hidden;
}
.gcolumn img {
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
@media screen and (max-width: 700px) {
.gcolumn {
width: 100%;
}
}

<div class="grow">
<div class="gcolumn" style="background-color:#E3EAEA">
<div class="gtext">
<h2>example header</h2>
<p>this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt</p>
</div>
</div>
<div class="gcolumn" style="background-color:#bbb;">
<img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
</div>
<div class="gcolumn" style="background-color:#bbb;">
<img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
</div>
</div>

我还使用以下CSS确实解决了我的问题，但是阅读其他人的评论，他们说它真的很俗气，不是一个好方法......它还弄乱了文本，在中间变成了垂直和水平。为什么这种方法很俗气，不应该使用？这会有什么影响？

更改了 CSS 的一部分

.gcolumn {
float: left;
width: 33.33%;
height: auto;
display: table-cell;
overflow: hidden;
z-index: 1;
/* extra   */      
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.grow {
display: table;
/* extra   */  
overflow: hidden; 
}

我已经使用以下链接尝试其他选项，但到目前为止还没有为我想要的东西工作：

CSS - 将浮动子 DIV 高度扩展到父级高度

对我来说，如何使所有三列具有相同的高度，同时仍然保持图像的响应并确保文本保持在div的中间

以下是我目前拥有的jsfidding

https://jsfiddle.net/z3b5p92d/14/

任何这方面的帮助将不胜感激

Answer 1

我会为此使用 flex - 默认情况下它确实等于高度列：

.grow {
display: flex;
flex-direction: row;
}
.gcolumn img {
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}

<div class="grow">
<div class="gcolumn" style="background-color:#E3EAEA">
<div class="gtext">
<h2>example header</h2>
<p>this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt</p>
</div>
</div>
<div class="gcolumn" style="background-color:#bbb;">
<img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
</div>
<div class="gcolumn" style="background-color:#bbb;">
<img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
</div>
</div>