等于两个div的高度 [英] Equal height for two divs

问题描述

我有2个div（每个6列）。在左边的div是一个图像，在右边的div是一些报价。我想我的右侧div的高度与图片的高度相同。

I have 2 divs (6 columns each). In the div on the left is an image, in the div on the right is some quote. I want my right div's height to be the same as height of image.

这是我的代码： http://codepen.io/matysflance/pen/ PZXdBK

<div id="testimonials" class="container-fluid testimonials">
    <div class="row">
        <div class="col-lg-6 image">
                <img src="http://placehold.it/1100x700/f3e42a" alt="">
        </div>
        <div class="col-lg-6 quote">
            <blockquote>
                <p>"Integer posuere erat a ante venenatis dapibus posuere veit al..." </p>
                <cite>Susan Sims, Interaction Designer at XYZ</cite>
            </blockquote>
        </div>
    </div>
</div>

推荐答案

您可以使两个div的容器成为flexbox，

You can make the container of both divs a flexbox, which will automatically apply equal heights to the child elements.

请尝试以下操作：

.row { display: flex; }

修订的Codepen

通过 .row 一个flex容器，子项（ .image 和 .quote ）成为flex项目，默认共享等高。有关详情，请参阅此处： http://stackoverflow.com/a/33815389/3597276

By making .row a flex container, the children (.image and .quote) become flex items, and share equal height by default. See here for more details: http://stackoverflow.com/a/33815389/3597276

这篇关于等于两个div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！