两个div的高度相等

Posted 2023-03-05

【中文标题】两个div的高度相等

【英文标题】：Equal height for two divs

【发布时间】：2016-05-22 10:05:45

【问题描述】：

我有 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" >
        </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>

【参考方案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);
);

【讨论】：

当所有解决方案都不起作用时为我工作。基本上，一些核心 CSS 框架样式与 Flex 和 Table Display 声明发生冲突。

【参考方案2】：

您可以将两个 div 的容器做成一个 flexbox，它会自动将相等的高度应用到子元素。

试试这个：

.row  display: flex; 

Revised Codepen

通过使.row 成为弹性容器，子项（.image 和.quote）成为弹性项目，并且默认共享相同的高度。更多详情请看这里：https://***.com/a/33815389/3597276

【参考方案3】：

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

希望对你有帮助。

【参考方案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>

【参考方案5】：

类似的问题已经回答here

为了您的方便，我也将答案写在这里。

弹性盒

对于 flexbox，它是一个声明：

.row 
  display: flex; /* equal height of the children */


.col 
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;

<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>

表格布局

如果你还需要支持 IE 8 或 9，那么你必须使用表格布局：

.row 
  display: table;


.col 
  display: table-cell;
  width: 50%; /* depends on the number of columns */

  padding: 1em;
  border: solid;

<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>