获取表格以正确地与其他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上有一个“最大高度”设置，并带有一个像素值。因此，它将表格内容推入其下面的内容。所以你有它;一个简单的解决方案，就在我的视线之外。