html - 在真实表格 td 中使用带有显示表格单元格的 div

Question

我有一个用真实表格创建的复杂布局，它工作正常，但现在我使用 DIVS 创建了一个新布局，它工作正常，直到我在手机上测试高度，它看起来很糟糕，它只是不想保留我的高度 100% 测试还将页脚设置为 margin bottom 0，什么都没有，所以我将测试以下内容:

<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
  <tr>
    <td style="height:21px;"> 

<DIV style="display: table-cell;"> divvvvv </div></td>

  </tr>
  <tr>
    <td style="height:79px;"">


    </td>
  </tr>
  <tr>
    <td style="height:100%;"> </td>
  </tr>
  <tr>
    <td style="height:21px;"> </td>
  </tr>
</table>

问题是，我可以在table TD元素中添加那些div而不添加div-display-table和div-display-row吗？对我来说最好的方法似乎是混合表格和 div。那么混合它们的正确方法是什么？因为表格中的 TD 不会考虑高度和宽度，所以我必须同时使用表格和 div 似乎......

像这样:

<div class="container">

    <div class="row">

        <div class="column">Column 1</div>

        <div class="column">Column 2</div>

        <div class="column">Column 3</div>

    </div>

    <div class="row">

        <div class="column">Column 1</div>

        <div class="column">Column 2</div>

        <div class="column">Column 3</div>

    </div>

</div>

Answer 1

将表格元素与 div 混合使用最终会让您头疼，尤其是在响应式设计方面。对于同样的问题，我使用 Bootstrap CSS .他们有一个网格系统，在替换表格式布局和适应移动设备方面非常有效。您的目标 HTML 实际上非常接近 Bootstrap 使用的标记，因此您的头脑显然在正确的位置!

下载 Bootstrap js 和 css 后，我会做这样的事情:

<!-- the container-fluid class creates a full-width container -->
<div class="container-fluid"> 

    <!-- the row class creates a row broken into 12 columns. -->
    <div class="row">

        <!-- specify how many columns an element should take up out of 12 for each given device.  below is the markup for 3 evenly-spaced columns for a medium (desktop) device -->

        <div class="col-md-4">Column 1</div>

        <div class="col-md-4">Column 2</div>

        <div class="col-md-4">Column 3</div>

    </div>

    <div class="row">

        <div class="col-md-4">Column 1</div>

        <div class="col-md-4">Column 2</div>

        <div class="col-md-4">Column 3</div>

    </div>

</div>