Question

我有2个div（每个6列）。在左边的div是一个图像，右边的div是一些引用。我希望我的正确div的高度与图像的高度相同。

这是我的代码：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>

Answer 1

您可以使用jQuery

执行此操作

只需将班级same-height添加到您希望拥有相同高度的DIV

<强> JQUERY

jQuery(document).ready(function($) { //noconflict wrapper
    var heights = $(".same-height").map(function() {
        return $(this).height();
    }).get(),
    maxHeight = Math.max.apply(null, heights);
    $(".same-height").height(maxHeight);
});

Answer 2

你可以让两个div的容器成为一个flexbox，它会自动对子元素应用相同的高度。

试试这个：

.row { display: flex; }

Revised Codepen

通过使.row成为灵活容器，子项（.image和.quote）成为弹性项目，默认情况下共享相同的高度。有关详情，请参阅此处：https://stackoverflow.com/a/33815389/3597276

Answer 3

使用jQuery或普通Java脚本。只需获取所需元素的高度并将其设置为您需要编辑的元素。 $( ".col-lg-6 quote" ).height($( ".col-lg-6 image" ).height())

希望它有所帮助。

Answer 4

<强>简单地：

    var heightImgDiv = $('.ImgDiv').height();
    $('.Div').height(heightImgDiv );

div {
    background: red;
    float: left;
    width: 250px;
    margin: 0 10px 0 10px;
}

img {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ImgDiv"><img src="https://fallbacks.carbonads.com/nosvn/fallbacks/4cd1acdff7348a672d30bb3326800d80.jpeg"/></div>
<div class="Div"></div>

Answer 5

类似的问题已经回答here

为方便起见，我也会在这里写下答案。

<强> Flexbox的

使用flexbox，它只是一个声明：

＆＃13;

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

＆＃13;

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

＆＃13;

表格布局

如果您仍需要支持IE 8或9，则必须使用表格布局：

＆＃13;

.row {
  display: table;
}

.col {
  display: table-cell;
  width: 50%; /* depends on the number of columns */

  padding: 1em;
  border: solid;
}

＆＃13;

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

＆＃13;

两个div的高度相等

5 个答案: