Question

我有一个用真实表创建的复杂布局，它工作正常，但现在我使用DIVS创建了一个新的布局，它工作正常，直到我在手机上测试高度，它看起来很糟糕，它只是不想保持我的高度100％测试也设置页脚到底部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>

问题是，我可以在表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>

Answer 2

我试图理解你的想法，但它并不是很清楚......所以这就是我认为你的意思。

DEMO

CSS：

.container {
    display:table;
    height:200px;
    border:1px solid red;
}

.column {
    display:inline-block;
}

table {
    border: 1px solid black;
}

td {
    width:150px;
    border: 2px solid blue;
}

HTML：

<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
  <tr>
    <td style="height:21px;"> 
        <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>
    </td>
  </tr>
  <tr>
    <td style="height:79px;"">


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

在实际表td中使用div和display table-cell

2 个答案: