使用CSS的表格行的高度相同

我有N行內容，用戶應該使用拖放操作（用戶將項目右移到相應的項目左側）。這裏有一個例子：使用CSS的表格行的高度相同

enter image description here

所有塊應具有相同的高度 - 最大項的高度。（在這個例子中，大件物品在左邊＃2）。是否有可能使用純CSS？由於瀏覽器支持，我無法使用flexbox。我已經設法實現這個使用JS，但我不喜歡該解決方案:)

也許有人可以指點我的技術或類似的例子？

在此先感謝。

來源

2014-11-24 Andrey

你可以在jsfiddle中發佈你的表嗎？我有一個想法如何解決你的問題！ :-) – Stefan 2014-11-24 08:11:00

我在這裏創建了一個小提琴：http://jsfiddle.net/px0udsjz/ – Andrey 2014-11-24 08:31:24

我用你的代碼更新了jsfiddle例子！ – Stefan 2014-11-24 08:33:57

試試這個jquery代碼，它檢測到最大的元素並將它們全部設置爲該高度。

var height = 0; 
$(".table").find(".table-cell").each(function() { 
    height = Math.max(height, $(this).height()); 
}); 

$(".table").find(".table-cell").css("height", height);

這裏是一個JSfiddle的例子。

你需要jQuery爲此，所以確保添加jQuery庫到你的代碼。

來源

2014-11-24 08:30:52 Stefan

我已經設法使用JS來做到這一點。 JS解決方案的問題是，當您調整widnow或更改方向時 - 您必須重新計算一次又一次 – Andrey 2014-11-24 08:34:03

您可以給它像200px的寬度嗎？並且在移動電話/平板電腦上使用寬度更小的媒體查詢？ – Stefan 2014-11-24 08:40:00

@Stefan：你的代碼有點短：http://jsfiddle.net/px0udsjz/2/ – algorhythm 2014-11-24 08:43:08

使用CSS的表格行的高度相同

回答

相關問題