用 DIV 替换表格布局答案

【问题标题】：replace table layout with DIVs用 DIV 替换表格布局
【发布时间】：2015-12-01 11:18:08
【问题描述】：

我不熟悉带有 CSS 布局的 DIV 标签。我在表格中有以下布局并尝试用 DIV 替换。我们在应用程序中使用 DIV 标签。所以我不想干扰现有的布局。我很感激任何意见。

<table style="width:100%;" border="1">
    <tr>
    <td style="width: 80%; " colspan="4"></td><td rowspan="3"></td>
    </tr>
    <tr>
    <td style="width: 20%; "></td><td style="width: 20%; "></td><td style="width: 20%; "></td><td style="width: 20%;"></td>
    </tr>
    <tr>
    <td style="width: 40%; " colspan="2"></td><td style="width: 40%; " colspan="2"></td>
    </tr>
</table>

【问题讨论】：

不清楚您使用 div/table 的目的。很可能一张桌子非常适合内容。不过目前还很难说。
根据给出的信息，我建议研究一个框架，例如Bootstrap Grids。尽管@LeeTaylor 提出了一个很好的观点。如果没有更多信息，我们不知道什么更适合您的项目。
如果我理解你的问题， display="table" 排除你的要求。

标签： html css

【解决方案1】：

正如有人已经提到的那样，您可能应该使用一些框架，例如 Bootstrap 例如：http://getbootstrap.com/css/#grid

然而，这里有一个小小提琴示例，只有“DIV 标签”：https://jsfiddle.net/Munja/q3f21Lnk/

<div class="table">
    <div class="first">
        <div class="one"></div>
        <div class="one">
            <div class="one-fourth"></div>
            <div class="one-fourth"></div>
            <div class="one-fourth"></div>
            <div class="one-fourth"></div>
        </div>
        <div class="one">
            <div class="one-half"></div>
            <div class="one-half"></div>
        </div>
    </div>
    <div class="second"></div>
</div>

【讨论】：