HTML CSS - ＆＃34;填充＆＃34;一个不同大小的块

Question

我有一个部门，我试图用50x50瓷砖填充。

有些瓷砖是100x50，有些是50x100。

当我用50x50填充div时，一切都非常适合。

当我尝试放入50x100或100x500时，似乎某些空格被阻挡了。

我如何制作这样的瓷砖不会跳过空格？

示例

按顺序插入图像块

Answer 1

你只需要使用colspan＆amp;行正确，这是结果：

＆＃13;

＆＃13;

   <table style="table-layout:fixed;border:1px solid black;border-collapse:collapse;"><tbody><tr>
<td rowspan="1" colspan="1" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">1</td>

<td rowspan="2" colspan="0" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">2</td>

<td rowspan="1" colspan="-1" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">3</td>

<td rowspan="1" colspan="-2" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">4</td>

<td rowspan="1" colspan="-3" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">5</td>



</tr><tr>
<td rowspan="0" colspan="1" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">6</td>

<td rowspan="0" colspan="0" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">7</td>

<td rowspan="0" colspan="-1" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">8</td>

<td rowspan="0" colspan="-2" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">9</td>



</tr><tr>
<td rowspan="-1" colspan="1" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">10</td>

<td rowspan="-1" colspan="0" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">11</td>

<td rowspan="-1" colspan="2" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">12</td>

<td rowspan="-1" colspan="-2" width="20" height="20" style="border:1px solid grey;text-color:red;text-align:center;vertical-align:middle;background-color:red;">13</td>


</tr>
</tbody></table>

＆＃13;

＆＃13;

＆＃13;