absolute table grid 其他的 flex、文档流、float、或者（row、col栅格化）之类的应该不行，他们对于多行这种有点无力。

各位大佬，怎么写这种不规则宫格啊

发布于
2021-06-13

✓ 已被采纳

<html>
    <head>
        <title>option chain</title>
        <meta charset="utf-8" />
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            .container {
                display: grid;
                grid-template-areas: 'a a b'
                                      'a a c'
                                      'd e c'
                                      'd f g'
                                      'h f g';
                grid-template-columns: 100px 50px 100px;
                grid-template-rows: 100px 40px 50px 50px 60px;
            }
            div>div {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div>div:nth-of-type(1) {
                grid-area: a;
                background-color: red;
            }
            div>div:nth-of-type(2) {
                grid-area: b;
                background-color: yellow;
            }
            div>div:nth-of-type(3) {
                grid-area: c;
                background-color: green;
            }
            div>div:nth-of-type(4) {
                grid-area: d;
                background-color: gray;
            }
            div>div:nth-of-type(5) {
                grid-area: e;
                background-color: pink;
            }
            div>div:nth-of-type(6) {
                grid-area: f;
                background-color: coral;
            }
            div>div:nth-of-type(7) {
                grid-area: h;
                background-color: cyan;
            }
            div>div:nth-of-type(8) {
                grid-area: g;
                background-color: blue;
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>
</html>

这样试试

linong

29.2k1266132

发布于
2021-06-12

absolute
table
grid

其他的 flex、文档流、float、或者（row、col栅格化）之类的应该不行，他们对于多行这种有点无力。

HAWNRE

341128

发布于
2021-06-16

更新于
2021-06-16

做成一整张图片，然后用图片热区做链接
https://www.w3school.com.cn/t...

Fractal

5.5k22433

发布于
2021-06-16

更新于
2021-06-16

TABLE 可以做

<html>
<head>
  <style type="text/css">
    table {border-collapse:collapse;}
  table tr {height:2em;line-height:2em;}
  table tr td {min-width:2em;}
  </style>
</head>
<body>
  <table border="1">
    <tbody><tr>
      <td colspan="2" rowspan="2">图1</td>
      <td colspan="2">烧烤类</td>

    </tr>
    <tr>
      <td colspan="2" rowspan="2">图2</td>
    </tr>
    <tr>
      <td rowspan="2">图3</td>
      <td>炒菜类</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">图4</td>
      <td rowspan="2">湘菜系列</td>
    </tr>
    <tr>
      <td>川菜系列</td>
    </tr>
  </tbody>
  </table>
</body>
</html>

各位大佬，怎么写这种不规则宫格啊

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？