Question

我正在重新编写现有模块以使其更具适应性。以下是当前设计的一般模型。此设计用于多种用途，目标是添加或删除模块应该很容易。

现在，我们正在使用HTML <table>来实现布局，在任何地方使用col-span和row-span，但这会变得非常混乱，非常快（特别是如果我们想要删除一个模块，或添加另一个不同大小的模块。）

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

我试过Bootstrap，但是有些模块有固定的大小，这搞砸了Bootstrap的GRID设计。 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的网格布局

1 个答案: