html - 如何使divs高度相同？

我有一个parent-div，其中包含三个divs，我想使它们具有相同的高度，但是它不起作用。第一个和第三个div分别包含一个图像。第二个div包含三个带有内容的divs。

这是HTML:

<div class="container">
    <div class="column1">
        <img src="http://placehold.it/300x318">
    </div>

    <div class="column2">
        <div class="row1">
            <div class="text">UNIKE GUSTAVIANSKE STILMØBLER.</div>
            <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
            <div class="text">OG 1800-TALLS TRADISJONER.</div>
        </div>
        <div class="row2"></div>
        <div class="row3">
            <div class="text">
                Åpningstider:<br>
                Man - Fre 11 -17     Lør 11- 15
            </div>
        </div>
    </div>

    <div class="column3">
        <img src="http://placehold.it/300x318">
    </div>
</div>

.container具有css-rule display:flex;。当我将其也应用于.column1，.column2和.column3时，布局将中断。

我试图实现图像高度的增加和减少取决于.column2。不幸的是，我无法更改HTML或使用JS。

Here您可以看到一个JS-Fiddle。我已注释掉CSS规则。

非常感谢您的帮助!

最佳答案

在问题中，您提到您将display:flex应用于.column1，.column2和.column3。

而是将其应用于.column1和.column3，并将.column2保留为display:block。

这应该可以解决您的问题(可以在JS fiddle 中使用)。

关于html - 如何使divs高度相同？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40106963/