Количество столбцов CSS не учитывается

Question

Здесь есть похожий вопрос без реального ответа: Ошибка столбцов CSS - при подсчете 5 столбцов только 4 (с изображениями)

Я использую column-count для отображения элементов встолбцы (в данном случае это набор section элементов, но это происходит независимо от используемого элемента (очевидно)).

Проблема в том, что Chrome и Firefox (не пробовали другие) не всегда уважаютуказанное количество столбцов.

Если я установлю его на 4, иногда это будет 4, а иногда меньше 4 (к счастью, никогда).

Если я использую Firebug (илианалогично) для изменения высоты некоторых элементов в столбцах иногда столбцы перепрыгивают с 3 на 4.

Это действительно странно и очень раздражает, и я надеюсь, что кто-то знает, почему это происходит, и, надеюсь, какчтобы исправить это.

Вот JSFiddle, отображающий проблему: http://jsfiddle.net/NY2Zx/ вы можете поиграться с размерами изображений, чтобы увидеть изменение количества столбцов.

Спасибо

Answer 1

отметьте это http://www.w3.org/TR/css3-multicol/#pseudo-algorithm

Пример JSFiddle работает нормально, если он записан в локальном html-файле и загружен в Firefox и Chrome. Попробуйте указать ширину элемента div.

Answer 2

В вашем примере (jsfiddle) есть 5 элементов одинакового размера, которые должны быть распределены на 4 столбца. Поскольку они не подходят друг к другу (их больше 4), первый столбец будет содержать 2 элемента. Это определяет высоту контейнера, поэтому второй столбец также получит 2 элемента, и поэтому для третьего столбца остался один, а для четвертого столбца нет. - это четыре столбца, но четвертый просто пуст ...

Другими словами: высота контейнера определяется минимальной высотой, необходимой для размещения всех элементов в количестве столбцов. Как только это будет сделано, содержимое будет заполнено в столбцы, начиная слева, и каждый столбец получит столько содержимого, сколько уместится в него.

Answer 3

По какой-то причине я не уверен, почему при наличии пустого абзаца, завершающего текст, столбцы снова будут переформатированы. Это не идеальное исправление, так как оно должно проходить без пустых элементов, но, возможно, это быстрое исправление, с которым я столкнулся, для кого-то, у кого все еще есть эта проблема.

Answer 4

здесь пример работы, но с элементом переноса изображения.

.wrap {    
    -webkit-columns: 4 auto;
    -moz-columns: 4 auto;
    columns: 4 auto;
}

.wrap .img {
    display: block;
    margin: 0 0 10px;
    line-height: 0px;
}

Если изменить высоту строки, то снова появится ошибка.

http://jsfiddle.net/NY2Zx/4/