HTML CSS - 다른 크기의 블록으로 div를 "채우기"

Question

저는 50x50 타일로 채우려는 부서가 있습니다.

일부 타일은 100x50이고 일부는 50x100입니다.

div를 50x50으로 채우면 모든 것이 매우 잘 맞습니다.

50x100 또는 100x500을 넣으려고하면 일부 공백이 막히는 것처럼 보입니다.

타일로 공백을 건너 뛰지 않도록하려면 어떻게해야합니까?

예

이미지 블록을 순차적으로 삽입

Answer 1

당신은 블록이 렌더링되는 순서를 변경할 수 있습니다하지 않는 한, float: left;를 사용하여 뭘 하려는지 달성 할 수 .

대신 컨테이너 내에 position: absolute;을 사용해야합니다. 이 예를 참조하십시오 https://jsbin.com/wisumoqumu/edit?html,css,output

Answer 2

그냥 &가 제대로 ROWSPAN 열 병합을 사용할 필요가

,이 결과 : 당신은 어떤 코드를 게시되지

<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>