Question

我不知道我是否正确地提出了我的问题，所以如果我不这样做，我会道歉。英语不是我的母语。

有人可以给出解释并给我一个例子来实现以下目的;我想要3个容器DIV（A，B＆amp; C）。如果将容器添加到容器A中，容器B和容器的高度。 C应自动匹配容器A.

现在是第二期;用于容器B＆amp; C我想要显示图像。示例（现在问题开始解释）;如果容器A的高度超过100px，则容器B显示两个图像（高度均为40px），容器C将显示单个90px图像（高度）。如果容器A超过200px，则更多的图像将显示在容器B和B中。下进行。

我过去曾尝试这样做，但在几个方面失败了。通常我可以设法使DIV的高度匹配，但图像看起来是截止的。最后我放弃了，因为我缺乏为此找到解决方案的知识和技能。

如果这没有意义，我再次道歉，但是当英语不是你的母语时，有点难以解释。所以，如果它不可理解，那就完全不理我了。只是想看看是否有人理解我想在这里实现的目标。谢谢。

//后续

Sam的使用flex的代码实际上适用于第一部分。非常感谢。我试了一下，虽然我先发现了一个小问题（由于使用了底部填充），但效果很好。

现在是第2部分;除了图像，我也在使用文字。容器A越长，容器C中应显示的东西（文本和图像）越多（取决于容器A的高度）。因此容器C中的内容应该是动态的（取决于A）？我不知道这是否是正确的术语。

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

现在当你在表格上前进时，它会在高度上增长，第二列也是如此，但它有空的空间，我希望那个空白空间充满了文字和我创建的一些图像。因此，空白空间的数量减少到最小。

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

我希望这能更好地解释一下吗？

提前再次感谢你。

Answer 1

对于同等高度问题，您可以尝试使用flexbox作为简单的解决方案。查看Can I Use，看看它是否适用于您打算使用的浏览器。这是一个example，向您展示它是如何使用的。尝试在第一个col中添加和删除文本，以查看其他cols根据它更改高度。我恐怕不明白第二个问题。但也许这指向了正确的方向。

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容器的高度

1 个答案: