浮動部分的高度相等（僅限CSS）

我有三個浮動div，應該始終具有相同的高度。但高度應該是最長的浮動div的高度。我已經設置了媒體查詢，所以這應該適用於所有三種情況。浮動部分的高度相等（僅限CSS）

我無法使用人造列，因爲我有三個部分之間的空間。我創建了一個fiddle.`

我必須用float來做這個任務，所以請不要問我去除浮點數並使用表格或其他東西。 *

enter code here 請調整窗口看到的媒體查詢效果。謝謝。

來源

2017-04-10 magarw10

我們的代碼是完全錯誤的 –

感謝擡起頭。 – magarw10

：O：O：O：O：O：O –

套裝max-height和min-height來。我改變了你的代碼，現在所有元素均具有相同的高度

https://jsfiddle.net/75r9mbxn/2/

更新：

https://jsfiddle.net/75r9mbxn/8/

現在它改變基於最高高度的元素，它會隨負載而變化，您可以更新section

來源

2017-04-10 07:24:22

您是否曾經對自己的項目使用過自己的建議？你怎麼可能知道一個硬編碼的Npx將適合？（順便說一句你的例子不能很好地工作，儘量調整了一下，你的身高是靜態的，因此在某些點上的內容離開DIV邊界） –

@ RokoC.Buljan是的，它的作品，所以我會用它 –

家長高度應規定由它的內容。並且要求將所有其他元素保持在最高點的高度 - 所以不要。根本不是一個好的答案，我真的不認爲你會在你自己的項目中使用該代碼。 –

使用window.getComputedStyle來計算截面的高度。循環section並計算最大高度。然後將其分配爲截面高度。

var maxHeight = 0; 
$('section').each(function(index, element) { 
    var style, height; 
    style = window.getComputedStyle(element); 
    height = parseInt(style.height); 
    maxHeight = height >= maxHeight ? height : maxHeight; 
}); 
$('section').css('height', maxHeight + 'px');

Fiddle Link

來源

2017-04-10 07:33:24

浮動部分的高度相等（僅限CSS）

回答

相關問題