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

我在设计工作上遇到了一些麻烦。我环顾网络很多，但我找不到我要找的东西。如何以相同的高度并排设置两个div？

我试图做类似的东西：concept design

的事情是，我开始做与CSS只，但它不是很好的解决方案，因为如果我的照片有不同的比例或其他原因，它根本无法工作。

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

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

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

有人（乔瓦尼·佩里洛）建议我有这样的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应该动态改变宽度以具有相同的高度。

来源

2016-03-04 Nic727

可能的重复[如何保持两个div并排相同的高度？]（http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-并排同一高度） –

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

这里是更新的codepen。

更新：

要保留宽高比改变img标签的height到auto。另外，将.section类的height更改为auto。我也将width的.colonne-gauche返回到65%和width的.colonne-droite返回到35%。

来源

2016-03-04 21:22:40 Anthony

调整屏幕大小时，图像不符合原始比率。这个想法很好，但需要很多媒体查询的断点。我需要一些可以动态改变图像宽度以获得相同div高度的东西。不知道是否有可能。 – Nic727

这是可能的。查看我的答案和更新后的codepen中的更新部分。 – Anthony

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

来源

2016-03-05 21:19:23

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

回答

相关问题