如何使div高度相同？

Question

我有一个父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规则display:flex;.当我还应用此.column1,.column2并且.column3,布局休息.

我试图实现图像高度增加和减少依赖.column2.不幸的是,我无法更改HTML或使用JS.

在这里你可以看到一个JS-Fiddle.我已经注释掉了CSS规则.

非常感谢您的帮助!

Answer 1

在您提到的问题中，您申请display:flex了.column1，.column2并且.column3。

相反，只需将其应用于.column1和.column3并保留.column2为display:block。

这应该可以解决您的问题（适用于您的 JS-Fiddle）。