代码之家 › 专栏 › 技术社区 › Jordumus

重新设计无表标记的网格布局

css-tables css html

Jordumus · 技术社区 · 7 年前

我正在修改现有模块,使其更具适应性。下面是当前设计的通用模型。这种设计用于多种用途,目标是添加或删除模块应该很容易。

现在,我们正在使用HTML <table> col-span 和 row-span

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

我尝试了Bootstrap,但一些模块的大小是固定的,这会扰乱Bootstrap的网格设计。浮动与垂直堆叠有问题。。。

它现在是如何创建的代码片段:

<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>

1 回复 | 直到 7 年前

Muhammad Bilal 7 年前

根据需要自定义网格

<!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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前