如果它们在一个容器中，如何并行增加两个 div 高度[重复]答案

【问题标题】：how to parallel increase two div height if they are in one container [duplicate]如果它们在一个容器中，如何并行增加两个 div 高度[重复]
【发布时间】：2015-07-14 14:33:08
【问题描述】：

如何使两个 div 高度与 css 相等。我想并排查看这两个 div。

<div>How to make two div heights equal with css.How to make two div heights equal with css.</div>

或

<div>How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css.</div>

【问题讨论】：

你想让 div 并排？

标签： html css

【解决方案1】：

假设你有并排的 div，你可以很容易地使用：

display:flex

您的 HTML 是：

<div class="row">
  <div class="col">How to make two div heights equal with css.How to make two div heights equal with css.</div>

  <div class="col">How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.</div>
</div>

CSS 将是：

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

.col{
    border: 1px solid black;
    flex:1; // use this if you want width to be equal as well

}

见小提琴：http://jsfiddle.net/9qzzu1c7/

【讨论】：

【解决方案2】：

假设只有两个 div，你可以使用这个 css

div{display:inline-block;height:400px;width:48%;overflow-y:scroll;}

demo

根据需要更改高度。您也可以将溢出设置为自动。

【讨论】：

【解决方案3】：

并排显示 div 的方法有很多，可以使用 floats 和 static widths and heights，也可以使用 display inline-block 和 percent widths and static heights。

但是，如果没有明确给出高度，没有一个会真正在两个 div 上给你相同的高度。如果你有静态高度，它就不是很有帮助，因为如果你的文本需要变长并且高度不能容纳文本的数量怎么办。

实现此目的的一种简单方法是使用 table row 和 cell，如下所示： http://jsfiddle.net/7ch85rs1/

【讨论】：

【解决方案4】：

如果我理解正确，您希望它们并排，因为 div 实际出现在彼此下方？如果是这样：

我想同时查看这两个 div。

https://jsfiddle.net/ym2c64ay/

<div id="parent">
<div>How to make two div heights equal with css.How to make two div heights equal with css.</div>
<div>How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css.</div>
</div>

div{
    background: #F00;
    float: left;
    width: 50%;
}

【讨论】：

这不起作用，如果文本足够宽，它们会在彼此下方滑动。 OP也要求两个高度相等
谢谢。但这个问题不是很清楚。
但是如果任何 div 中的内容增加，我想让两个
的高度相等，所以两个 div 高度平行增加。
编辑了我的答案。这会起作用的。