Дополнительное пространство между элементами DIV встроенного блока ⇐ CSS

[Anonymous]

Я создаю гибкий макет с помощью модуля макета столбцов CSS и вижу неожиданные результаты, когда два или более элемента находятся в одной «строке» столбца. Между элементами появится зазор от 3 до 4 пикселей. Я тестировал в IE11, FireFox 24, Chrome 31 и Safari 5.1.7, и все они демонстрируют одинаковое поведение.

Код: Выделить всё

.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;
}

Код: Выделить всё

1
2
3
4
5
6
7
8

Я не хочу использовать отрицательные поля, чтобы закрыть пробел, поскольку я хочу ввести поведение перетаскивания. Поплавок влево устранит пробел, но это создаст еще один набор проблем. Как ни странно, когда я использую сортировку jQueryUI, после события drop и jQueryUI упорядочивает элементы, пробела больше нет.

Подробнее здесь: https://stackoverflow.com/questions/203 ... v-elements