html - CSS 网格中的元素跨度 X 2

Question

我创建了一个非常简单的流体 CSS 网格，我想显示某些元素，这些元素的大小是原来的两倍，占用 4 个正方形而不是 1 个。 如果在下图中将方 block 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;
}

我怎样才能做到这一点？

请检查我当前的fiddle

Answer 1

可以做到，但我认为只能在左边(通过使用float:left)，检查你的updated fiddle .

否则，我认为您需要将 table 与 colspan 和 rowspan 一起使用。