基于 1 个容器自动匹配所有 DIV 个容器的高度

Question

我不知道我的问题表述是否正确，如果不正确，我深表歉意。英语不是我的母语。

谁能给我解释一下并给我一个例子来实现以下目标；我想要 3 个容器 DIVs（A、B 和 C）。如果向容器 A 添加内容，容器 B 和 C 的高度应自动与容器 A 匹配。

现在是第2期；对于容器 B 和 C，我想显示图像。示例（现在问题开始解释）；如果容器 A 的高度超过 100px，则容器 B 显示两个图像（高度均为 40px），容器 C 将显示一个 90px 的图像（高度）。如果容器 A 超过 200 像素，更多图像将显示在容器 B 和 C 中。

我过去曾尝试这样做，但以多种方式失败了。通常我可以设法使 DIV 的高度匹配，但图像看起来被截断了。最后我放弃了，因为我缺乏解决这个问题的知识和技能。

如果这没有意义，我再次道歉，但是当英语不是您的母语时，很难解释某些事情。所以如果看不懂，就完全无视我吧。只是想看看是否有人了解我在这里想要实现的目标。谢谢。

//后续

Sam 使用 flex 的代码在第一部分确实有效。非常感谢。我尝试了一下，虽然我首先遇到了一个小故障（由使用底部填充引起），但效果很好。

现在开始第二部分；除了图像，我还使用文字。容器 A 越长，容器 C 中应显示的内容（文本和图像）越多（取决于容器 A 的高度）。那么容器 C 中的内容应该是动态的（取决于 A）？不知道这个说法对不对

我将向您展示我目前正在做的一个例子。我目前只有 2 列/DIVs（在测试时暂时忽略第 3 列）。在容器 A 中有一个表单。根据您在表单上 select 的选项，in 的大小（= 高度）明显增加。现在感谢 Sam，第二列的高度与第一列相同。

现在，当您在表格上前进时，它的高度会增加，第二列也是如此，但是它是空的 space，我希望空的 space 充满文本和我创建的一些图像。所以空的数量space减少到最小。

简而言之；根据容器 A 中的内容，容器 B 应该开始显示我输入的文本和图像。

我希望这能更好地解释它？

再次感谢您。

Answer 1

对于等高问题，您可以尝试使用 flexbox 作为一种简单的解决方案。查看 Can I Use to see if it's available for the browsers you intend to use. Here is an example 向您展示它是如何使用的。尝试向第一个列添加和删除文本，以查看其他列根据它更改高度。恐怕我不明白第二个问题。但也许这为您指明了正确的方向。

html, body  { 
 height: 100%;
 width: 100%;
}

.wrap {
 display: flex;
}

.col {
  width: 50px;
  padding: 10px;
}

.col.odd {
  background: red;
}
.col.even {
  background: lime;
}

<div>
  <h1>Equal height with flexbox</h1>
  <div class="wrap">
    <div class="col odd">
      blub <br> 
      test <br> 
      blub <br>
      test
    </div>
    <div class="col even">blub</div>
    <div class="col odd">blub</div>
  </div>
</div>

基于 1 个容器自动匹配所有 DIV 个容器的高度

Automatically match height on all DIV containers, based on 1 container

html

css

containers