Zusätzlicher Platz zwischen Inline-Block-DIV-Elementen [Duplikat] ⇐ CSS

[Anonymous]

Ich erstelle ein flüssiges Layout mithilfe des CSS-Spaltenlayoutmoduls und sehe unerwartete Ergebnisse, wenn sich zwei oder mehr Elemente in derselben „Zeile“ einer Spalte befinden. Zwischen den Elementen entsteht eine Lücke von 3 bis 4 Pixel. Ich habe es in IE11, FireFox 24, Chrome 31 und Safari 5.1.7 getestet und sie zeigen alle das gleiche Verhalten.

Code: Select all

.tile-container {
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;
column-fill: auto;
height: 502px;
background-color: gray;
}

.tile-large {
width: 250px;
height: 250px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: green;
}

.tile-wide {
width: 250px;
height: 125px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: blue;
}

.tile-small {
width: 125px;
height: 125px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: red;
}

Code: Select all

1
2
3
4
5
6
7
8

Ich möchte nicht anfangen, negative Ränder zu verwenden, um die Lücke zu schließen, da ich Drag/Drop-Verhalten einführen möchte. Mit „Float left“ wird die Lücke entfernt, aber das führt zu weiteren Problemen. Seltsamerweise ist die Lücke nicht mehr vorhanden, wenn ich jQueryUI sortable verwende, nachdem das Drop-Ereignis erfolgt ist und jQueryUI die Elemente angeordnet hat.