如何顯示：表格單元格與我的CSS具有相同的高度？

我有以下HTML：如何顯示：表格單元格與我的CSS具有相同的高度？

<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;"> 
    <div style="display: table-row"> 
     <div class="grid_6" style="display: table-cell;"> 
      <div class="block-border"> 
       <div style="background-color: red; height: 100px;"></div> 
      </div> 
     </div> 
     <div class="grid_6" style="display: table-cell;"> 
      <div class="block-border"> 
       <div style="background-color: red; height: 200px;"></div> 
      </div> 
     </div> 
    </div> 
</article>

我使用顯示：錶行，因爲我聽說，這將使我的DIV的工作就像表格單元格，我是想的DIV是相同的高度。然而，它看起來像第一個grid_6網格有一個小高度，而第二個至少有100px。我怎樣才能讓它填充到相同的高度？

下面是一個例子：fiddle

來源

2013-02-13 Melina

給同一高度第一網格:) – Morpheus 2013-02-13 14:03:45

這工作。你只是不能看到第二個元素，因爲沒有樣式> http://jsfiddle.net/U8GEv/ – BenM 2013-02-13 14:05:38

等待等待我不能給第一個網格的高度。網格可以是任何高度。我只是把那個div作爲測試。 – Melina 2013-02-13 14:14:24

<div class="block-border"> 
     <div style="background-color: red; height: 100px;"></div>

你已經設置的第二要素即高度= 100像素的高度。

將高度設置爲兩個div元素。

來源

2013-02-13 14:10:46 Shail

等我不能那樣做。這只是一個例子。兩個DIV都可以有不同數量的文本。使用表格樣式可以使單元高度匹配，所以我不確定他們爲什麼不在這裏做。謝謝。 – Melina 2013-02-13 14:24:56

兩個grid_6元素都是相同的高度。你看到一個比另一個更大的紅色矩形的原因是你正着色內部div。如果你把顏色放在grid_6元素上 - 它們是一樣的。 http://jsfiddle.net/A7yXc/

<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;"> 
<div style="display: table-row"> 
    <div class="grid_6" style="display: table-cell; background-color: red;"> 
     <div class="block-border"> 
      <div style="height: 100px;">das</div> 
     </div> 
    </div> 
    <div class="grid_6" style="display: table-cell; background-color: red;"> 
     <div class="block-border"> 
      <div style="height: 200px;">das</div> 
     </div> 
    </div> 
</div>

來源

2013-02-13 14:54:47

如何顯示：表格單元格與我的CSS具有相同的高度？

回答

相關問題