CSS表，不同尺寸

Question

我正在顯示一些<div>箱爲矩形網格的一部分響應式佈局：

http://sl.cosd.com

的六盒，你可以在此頁面上看到的都是在未分組HTML源，所有在一排：

<div class="control"> 
<div class="controlContent"> 
<a>SOME VARIABLE-HEIGHT CONTENT including an image which might float</a> 
</div> 
</div> 

的control div的分配盒百分比寬度到第一整，然後1/2或1/3的屏幕寬度，所以他們的兩倍& tripl隨着屏幕尺寸的增加，會變成行。所述controlContent div的分配等的填充，邊緣，背景，border-radius等

我想象這是一個線性組箱子，符合標準的和屏幕閱讀友好，通過類似的表CSS顯示屬性。我知道CSS2.1允許元素被分配了類似的特性：

display: table; 
display: table-row; 
display: table-cell; 

我的主要問題：我已經（通過controlContent DIV）分配display: table-cell這些元素防止崩潰保證金裏面的內容，但不不提供一個統一的高度給細胞樣的div。 我需要在同一行中的所有兄弟姐妹有高度匹配的方式。

較小的單元格通常在它們下面有間隙，其中漸變背景只覆蓋單元格的框高度。 （更糟糕的是，這些單元格陣列之後的文本有時會填充到這些空白中：另一個問題可以通過演示標記來修復，但在解決第一個問題時可能會消失。）

我想我理解問題的基礎：我已經告訴每個<div>表現得像一個表格單元格無關，其高度匹配，因爲我也沒有辦法將這些元素分組到一個包含<div>的，而我可以分配display: table-row的性質，因爲這個分組的變化根據CSS媒體查詢。

在我關於我聽說過匿名錶盒和匿名錶行被創建，但不知道如何在這種情況下，使用它們的問題閱讀。由於我使用的CSS :nth-child()選擇在每個新行的開始清除浮動框，我希望我也可以使用這些選擇在每一個這樣的點，以建立一個新的錶行...但如何？

我沒有結婚到任何特定的解決方案。我只想知道這樣做的最佳做法。我希望能找到不涉及表示標記的解決方案，尤其是因爲一般的解決方案應爲任意數量的小區提供快速響應的可變維度表，不只是一個小的，容易可分解號像6

Answer 1

display:table-cell;應該給div /列相同的高度，只要父母 div有display:table;設置。

Check this fiddle（你可以添加/只要你想刪除儘可能多的cols）。

---

另一種解決方案是給。控制一個固定的高度，那麼你可以在controlContent使用height:100%;。

如果您只需要使用百分比，那麼你就聲明一個高度的所有的父容器.controlContent的，高達html和body：

html, body, .control, .controlContent { 
    height:100%; 
} 

顯然，這只是一個簡化。這是最可靠的方法，因爲table-cell未被某些舊瀏覽器正確渲染。

另一方面，您始終必須知道所有容器的高度（以像素或百分比表示）。

---

然後，有faux column method，但我不認爲它適合您的情況。

---

最後，還有的的JavaScript/jQuery的方法，而你的情況會是這樣

$(document).ready(function(){ 
    var higherContent = 0; 
    $('.controlContent').each(function() { 
     var currentHeight = $(this).height(); 
     if(currentHeight > higherContent) higherContent = currentHeight; 
    }).height(higherContent); 

}); 

這基本上（在頁面加載時）通過所有的controlContent和設置的值變量higherContent中最高的一個。然後將此值分配給所有controlContent。

可能不是最好的jQuery函數，無論如何:-)你必須適應你的媒體查詢針對的每一個決議。

---

如果我是你，我可能會去爲table-cell方法，這樣就可以針對不同的分辨率不同的寬度和佈局將在大多數現代桌面/移動瀏覽器適應。但一定要在儘可能多的設備上進行測試！

編輯：我看到你正在使用最小寬度的媒體查詢。你可以這樣改變你的代碼：

div.controlContent { 
    /* other stuff */ 
    display: block; 
    /* other stuff */ 
} 
@media only screen and (min-width: 480px) { 
    /* other stuff */ 
    div.controlContent { 
     display: table-cell; 
    } 
    /* other stuff */ 
}