HTML CSS - "Fill" ein div up mit unterschiedlich großen Blöcken

Question

Ich habe eine Abteilung, die ich versuche, mit 50x50 Fliesen zu füllen.

Einige Kacheln sind 100x50 und manche sind 50x100.

Wenn ich gerade das div mit 50x50 auffülle, passt alles sehr gut.

Wenn ich versuche, 50x100 oder 100x500 zu setzen, scheint es, als ob einige Räume blockiert werden.

Wie würde ich das machen, damit die Kacheln keine Leerstellen überspringen?

Beispiel

Bildblöcke werden sequentiell eingefügt

Answer 1

Sie können nicht erreichen, was Sie versuchen float: left; zu tun verwenden, es sei denn, Sie die Reihenfolge ändern, in der können die Blöcke wiedergegeben werden .

Stattdessen müssen Sie position: absolute; innerhalb des Containers verwenden. Sehen Sie folgendes Beispiel: https://jsbin.com/wisumoqumu/edit?html,css,output

Answer 2

Sie müssen nur richtig colspan & rowspan verwenden, ist dies das Ergebnis:

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