html - CSS 网格中的项目跨度 X 2

Question

我创建了一个非常简单的流体 CSS 网格，我想显示某些大小为 4 个方格而不是 1 个的项目。如果将下图中的方格 1 加倍，它将占用框 1、2、 8 和 9。

HTML

<div id="wrapper">
    <h1>Test Grid</h1>

    <ul id="grid">
      <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li>
    </ul>
</div>

CSS

#wrapper {
    margin: 10px;
    border: 1px solid black;
    padding: 5px 10px;
}

div, ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#grid{
    margin: 0 auto;
}

#grid li{
  display: inline-block;
  background: #eee;
  width: 165px;
  height: 165px;
  margin: 0 1px 1px 0;
}

我怎样才能做到这一点？

请检查我当前的小提琴

Answer 1

可以做到，但我认为只有在左侧（通过使用float:left），检查您更新的 fiddle。

否则我认为你需要使用tablewith colspanand rowspan。