如何将两个div并排设置为相同的高度？

Question

我在设计工作上遇到了一些麻烦。我在网上看了很多，但我找不到我想要的东西。

我正在努力做出类似的事情：concept design

事情是，我开始只使用CSS，但这不是一个好的解决方案，因为如果我的图片有不同的比例或其他原因，它根本不起作用。

我想要实现的是，在div中，我有一个大图像，在另一个div中（向左或向右浮动），我想要两个小图像，一个在另一个上面，与图像高度相同大的一个。所有这些（两个div）应该占据身体宽度的100％，但我真的不知道如何实现这一点。我不确定如何使宽度响应宽度......

我的图片之间也有一些奇怪的边缘......你能帮我删除它们吗？

所以我的代码是通过以下链接：http://codepen.io/anon/pen/MygaEB

有人（Giovanni Perillo）建议我使用这个Javascript代码：

var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");

var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;

if (height1 > height2) {
     div2.style.height = height1;
}
else {
     div1.style.height = height2;
}

事情是，它根本不起作用。我确定这是我可以使用的代码，但我不确定如何使其在我的代码中运行。

编辑：我试着看看我能用Flexbox做什么，但似乎没有用。 Flexbox允许两个盒子并排，具有相同的高度，但它也需要具有相同的宽度。我想要的是更具响应性的东西，如大图像占据3/4宽度，两个图像（在同一个div中）占据1/4宽度，但它们的总高度与大图像相同。我确信完全有可能像所有砌体布局那样做，但我不是真正的砌体，而是保持不变的东西：一个大图像和两个小图像，但响应图像尺寸。

编辑2：所需的代码应允许更改每个div的宽度，以确保它们具有相同的高度（不改变图像宽高比）。它应该与不同的图像宽高比一起使用。下面的示例显示了一个带有三个图像的div，但这只是说div应该动态地改变宽度以具有相同的高度。

Answer 1

Javascript没有必要。你可以用CSS完成这个。要使并排div高度相等，您需要使html和body具有height 100%，然后您必须为容器div指定一个高度（此可以是百分比或指定长度）。在这种情况下，我使用height 500px作为.section类。然后，对于内部容器，您需要指定height 100%。然后，该容器中的每个图像都需要指定的height，一个图像使用100%，两次使用50%等。我还删除了您的内联样式。我还删除了部分标签。

以下是更新后的codepen。

<强>更新

要保留宽高比，请将height代码的img更改为auto。另外，将height课程的.section更改为auto。我还将width的{​​{1}}更改回.colonne-gauche，将65% width更改回.colonne-droite。

Answer 2

div是块元素。你可以设置display：inline-block;使它们并排排列。