css佈局高度問題與網格類似的佈局

Question

所以我有一個大型的表單，並在字段集中分組了相似的元素，但所有字段集有不同的高度。我將字段集浮動到左側，所以任何額外的字段集都會被推到下面（當到達屏幕邊緣時，請考慮下一行）。

如何讓所有字段集的高度與該行中最高的字段集的高度相同？

fieldset { 
    float: left; 
    width: 278px; 
    margin: 10px; 
    height: inherit; 
    display: inline; 
    border: 1px solid #000000; 
} 

這是有點工作，除了高度問題。我不想要一個真正的網格，而是一個動態的網格佈局，所以如果某個具有800x600屏幕的人查看網站，並且我在網頁上有9個字段集，他們應該看到類似3x3網格的東西。如果你有一個更大的屏幕，你可能會看到像5x4網格。

Answer 1

你將不得不作出一些選擇，因爲這不能完全按照你想要使用純CSS的方式來完成。用JavaScript你可以做這個工作，但不是純粹的CSS。

考慮到這一點。你可以用可滾動的div來替換字段集，以獲得你想要的CSS版本（注意div的全部內容不會在所有情況下顯示，用戶可能需要滾動）。例如：

<style> 
    div { 
    float: left; 
    width: 278px; 
    margin: 10px; 
    height: 100px; 
    border: 1px solid #000000; 
    overflow: auto; 
    } 
</style> 

你可以嘗試一下here

最後其他的選擇是用JavaScript操作的元素已加載後的字段集的高度。