獲取表格以正確地與其他divs進行堆疊

Question

我已經看到一些類似的問題，但沒有真正全面的解決這個特定問題;如果有關於此的一個好線索，我不知何故錯過了，我提前道歉。

所以我有一個多部分問題，我的第一部分的解決方案創建了第二個問題。

我有一個4列布局，其中的內容需要均勻地保持在同一高度，這樣的事情：

第二個和第四個盒子裏將有一個背景顏色和高度需求保持在與其他兩個相同的高度，這將是圖像。目前我能找到實現這一目標的最可靠的方法是將其標記如表和單元格高度設置爲100％，像這樣：

<table> 
<tbody> 
    <tr> 
    <td style="width: 25%;"> 
    <figure><img alt="" class="img-responsive" src="http://lorempixel.com/1000/1000/business" /></figure> 
    </td> 
    <td class="bg-brand-dark" style="height: 100%; width: 25%;"> 
    <div class="block-padding-hor"> 
    <h3 class="text-inverse h6"><strong>Featured Corporate News</strong></h3> 

    <hr class="rule-part--bright center-block" /> 
    <p class="text-inverse h6">Hardly Dude, a new &#39;vette? The kid&#39;s still got, oh, 96 to 97 thousand, depending on the options.</p> 

    <p class="text-center"><a class="currentURL" href="">Continue Reading</a></p> 
    </div> 
    </td> 
    <td style="width: 25%;"> 
    <figure><img alt="" class="img-responsive" src="http://lorempixel.com/1000/1000/business" /></figure> 
    </td> 
    <td class="bg-gray-dark" style="height: 100%; width: 25%;"> 
    <div class="block-padding-hor"> 
    <h3 class="text-inverse h6"><strong>Featured Corporate News</strong></h3> 

    <hr class="rule-part--bright center-block" /> 
    <p class="text-inverse h6">Hardly Dude, a new &#39;vette? The kid&#39;s still got, oh, 96 to 97 thousand, depending on the options.</p> 

    <p class="text-center"><a class="currentURL" href="">Continue Reading</a></p> 
    </div> 
    </td> 
    </tr> 
</tbody> 
</table> 

這解決了我的第一個問題非常好，但創造一個新的。我添加此標記下的任何後續內容被「侵佔」，由臺上面，像這樣（「不希望」是什麼目前發生的事情）：

所以我的問題是，是否有一個良好的可靠的方法來減輕這一點？我只是假設一個表的行爲類似於一個塊元素並相應地堆棧，但這似乎並不是這種情況。提前感謝您提供任何建議，即使這是一個不必要的苛刻詞彙，並附帶一個解決此問題的預先存在的線索。

::編輯::

我並沒有包括任何CSS的，因爲它是不可能任何它正在對這個產生影響，但如果它似乎有必要了解這個問題只是評論，我會加它

::編輯2 ::

每請求，在這裏添加CSS不過，就像我說的，它大多隻是設置背景顏色和居中的事情：

<style> 
    .img-responsive { 
    max-width: 100%; 
    } 


    .bg-brand-dark { 
    background-color: #004892; 
    } 


    .block-padding-hor { 
    padding-left: 30px; 
    padding-right: 30px; 
    } 


    .rule-part--bright { 
    border: 2px solid #08b5fe; 
    width: 50%; 
    } 


    .center-block { 
    margin: 0 auto; 
    } 


    .text-inverse { 
    color: #ffffff; 
    } 


    .h6 { 
    font-size: 13px; 
    } 


    .text-center { 
    text-align: center; 
    } 

    .bg-gray-dark { 
    background-color: #4D4F53; 
    } 

</style> 

Answer 1

表格傳統上是創建等高柱佈局的可靠方法。

但是，自CSS Flexbox問世以來，用最少的代碼和更大的靈活性就可以實現相同的行爲。

有幾種方法來建立與Flexbox的高度相等列：

1. 使用flex-grow property
   該屬性指定的空間量的項目應在柔性容器內採取什麼樣的了。使用flex-grow: 1（或簡寫爲flex: 1），這些框將始終佔用flex容器中的所有可用空間。無論內容的大小或數量如何，這都可以保持多個盒子的高度。使用align-items property。
   此屬性控制Flex項目如何沿橫軸分配可用空間。默認值爲stretch，它沿所有可用空間展開Flex項目。這使得盒子保持相同的高度，因爲默認情況下每個盒子都會拉伸容器的高度。

2. 在柔性容器上使用min-height property。

HTML

<article id="container"> 
    <section class="box">1</section> 
    <section class="box">2</section> 
    <section class="box">3</section> 
    <section class="box">4</section> 
</article> 

CSS（不含裝飾風格）

#container { 
    display: flex; 
    justify-content: space-around; 
    min-height: 250px; 
} 

.box { 
    display: flex; 
    flex-direction: column; 
    width: 20%; 
    min-height: 200px; 
    box-sizing: border-box; 
    overflow: auto; 
} 

.box:nth-child(even) { 
    background-color: aqua; 
} 

DEMO

在演示中，什麼樣的內容永遠量（IM包括年齡）放在一個盒子裏，會導致兄弟姐妹盒子的高度相同。

請注意，flexbox受所有主流瀏覽器except IE 8 & 9的支持。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請使用Autoprefixer。更多詳情，請點擊this answer。

Answer 2

好的，經過大量的開發工具檢查後，我才發現問題所在。這不包含在我的標記中，因爲它不是我標記的一部分，但是嵌入了我正在處理的cms中。

前面的DIV上有一個「最大高度」設置，並帶有一個像素值。因此，它將表格內容推入其下面的內容。所以你有它;一個簡單的解決方案，就在我的視線之外。