html - 获取表以与其他div正确堆叠

我已经看到了与此类似的问题，但是并没有真正全面地解决这个特定问题。如果已经有了一个很好的线索，我就以某种方式错过了我提前道歉。

所以我有一个多部分的问题，而我对第一部分的解决方案创建了第二个问题。

我有一个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>

这很好地解决了我的第一个问题，但却创造了一个新的问题。我在此标记下方添加的任何后续内容都会被其上方的表格“覆盖”，例如（“不期望”是当前发生的情况）：



所以我的问题是，有没有一种很好的可靠方法来减轻这种情况？我只是假设一个表的行为类似于block元素，并相应地进行堆栈，但是事实并非如此。在此先感谢您的任何建议，即使这是一个不必要的苛刻词，并附带指向可解决此问题的现有线程的链接！

：：编辑：：

我没有包含任何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>

最佳答案

好的，因此在对开发工具进行了大量检查之后，我能够找到问题所在。它不包含在我的标记中，因为它不是标记的一部分，而是内置于我正在内部工作的cms中。

前面的DIV上有一个“最大高度”设置，带有一个像素值。因此，它将表内容推入其下面的内容中。所以你有它;一个简单的解决方案，就在我的视野之外。