CSS Галерея изображений Float BUG - PullRequest
Новая
       8

CSS Галерея изображений Float BUG

1 голос
/ 28 июня 2009

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

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

1 Ответ

3 голосов
/ 28 июня 2009

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

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

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

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

РЕДАКТИРОВАТЬ: Чтобы уточнить, как это происходит: Каждый div пытается поместиться на той же строке, что и предыдущий div, и перемещается как можно левее Если на линии не осталось места, она сначала будет нажата, а затем оставлена. В приведенном выше примере 4 будет сброшен на 3, затем он сместится влево настолько далеко, насколько это возможно, удар по 2. 5 будет сброшен на 4, а затем сместится влево настолько далеко, насколько это возможно.

...