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包含一个图像和一些文本。在其中一个div中，文本较长，因此有2行文本而不是1行，从而产生更高的div。

有没有一种方法告诉所有div获得更大的高度？我试着在谷歌和这里搜索，但没有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中调整元素的高度

2 个答案: