如何以相同的高度並排設置兩個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？

回答

相關問題