ОШИБКА с плавающей настройкой галереи изображений CSS

Question

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

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

Answer 1

Поскольку некоторые заголовки длиннее других, некоторые прерывают строку и тем самым делают div выше.Затем поплавки будут "цепляться" за эти более высокие выступы.Это не ошибка как таковая, просто так работает floating.

 --- --- ---
 |1| |2| |3|
 --- | | ---
     --- ---
         |4|
         ---
 ---
 |5|
 ---

Лучший способ избежать этой проблемы - присвоить каждому div заданную высоту.

В качестве альтернативы, вы можете сделать так, чтобы первый div каждой строки был "очищен:осталось", добавив соответствующий класс к каждому первому / четвертому / седьмому / etc div.

Редактировать:Чтобы уточнить, как это перемещается:Каждый div пытается поместиться на той же строке, что и предыдущий div, перемещаясь как можно дальше влево.Если в строке не осталось свободного места, она сначала будет сдвинута вниз, затем влево.В приведенном выше примере 4 будет сдвинуто вниз на 3, затем оно будет плавать влево как можно дальше, нажимая на 2.5 отталкивается вниз на 4, затем плывет влево так далеко, как только может.