CSS 如何使一个元素的高度适应另一个元素的高度

Question

我有以下 HTML 代码

<div class="row info_container">
    <div class="col-md-4 info_box">
        <p class="info_text"><img src=""/>Some text</p>
    </div>
    <div class="col-md-4 info_box">
        <p class="info_text"><img src=""/>Some text</p>
    </div>
    <div class="col-md-4 info_box">
        <p class="info_text"><img src=""/>Some longer text</p>
    </div>
</div>

其中有 3 个 div，每个包含一个图像和一些文本。在其中一个 div 中，文本较长，因此有 2 行文本而不是一行，导致更高的 div。

有没有一种 css 方法可以让所有 div 获得更大的高度？我尝试在 google 和此处搜索但没有 JS 找不到答案...

编辑：尝试遵循 css：

.info_container {
    display: flex;
    align-items: stretch;
}

但是没有用。还尝试删除 align-items 属性，而是在 .info_box 中添加 flex-grow:1，也没有用...

编辑 2 : aaaa 我发现错误了，是下面这行代码

.info_box{
height: 100%;
}

那是我的 CSS。因此，我可以确认只需将 display:flex 添加到容器中即可。

Answer 1

试试

.info_container { display: flex; align-items: stretch;}

Answer 2

CSS Flex 是您的朋友。只需将 display: flex 添加到容器中，如下所示：

.info_container {
  display: flex;
}

其他一切都应该就绪 :)

Karen Manenez 有一支方便的笔，可以很好地解释它 here

CSS 如何使一个元素的高度适应另一个元素的高度

How to adapt height of an element to another in CSS

html

css

height