在没有 table-tags 的情况下重新设计 grid-layout

Question

我正在修改现有模块以使其更具适应性。以下是当前设计的一般 mock-up。这种设计用于多种用途，目标是添加或删除模块应该很容易。

现在，我们正在使用 HTML <table> 来实现 lay-out，到处都使用 col-span 和 row-span，但这变得非常凌乱，非常快（特别是如果我们想删除一个模块，或者添加另一个不同大小的模块）。

解决这个问题的正确方法是什么？我不是在寻找一个完整的解决方案，我宁愿有一个我可以扩展的小例子。

我试过 Bootstrap，但有些模块有固定大小，这会弄乱 Bootstrap 的 GRID-design。 Float 在垂直堆叠方面存在问题，...

当前创建方式的代码片段：

<table>
    <tbody>
        <tr>
            <td colspan="4" rowspan="2">module</td>
            <td>module</td>
            <td colspan="3" rowspan="2">module</td>
        </tr>
        <tr><td>module</td></tr>
    </tbody>
</table>

Answer 1

根据需要自定义网格

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container-fluid">
      <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>
      <div class="row">
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
      </div>
      <div class="row">
      <div class="col-sm-6" style="background-color:black;">.col-sm-6</div>
        <div class="col-sm-3" style="background-color:green;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:blue;">.col-sm-3</div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6" style="background-color:red;">.col-sm-6</div>
        <div class="col-sm-3" style="background-color:pink;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:yellow;">.col-sm-3</div>
      </div>
    </div>

    </body>
    </html>

在没有 table-tags 的情况下重新设计 grid-layout

Redesign grid-layout without table-tags

html

css

css-tables