项目跨度X 2在CSS网格

我已经创建了一个非常简单的流体CSS网格，其我想显示是双大小占用4个方格，而不是1。某些项目如果正方形1是在被加倍图像下方它会占用盒1，2，8和9项目跨度X 2在CSS网格

css grid goes here

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

来源

2013-07-12 Imran

这是可以做到的，但我只觉得左侧（通过使用float:left），请检查您updated fiddle。

否则我认为你需要使用table与colspan和rowspan。

来源

2013-07-12 06:32:00 LinkinTED

当然肯定还有别的办法吗？我想在整个网格中放置更大的瓷砖，而不仅仅是第一个孩子。 – Imran

项目跨度X 2在CSS网格

回答

相关问题