Проблема с плавающей точкой или форматированием списков: элемент списка со стилем float не очищается влево, если элементы выше содержат несколько строк

Question

Мы видим странную проблему с плавающей точкой или форматированием списков.

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

Однако, когда строка над элементом содержит две строки текста, форматирование становится странным, и все элементы списка больше не выровнены согласованно.Например, элемент, который должен появиться в первом столбце, вместо этого появляется в третьем столбце.

Воспроизвести:

1) Перейдите сюда: http://www.panabee.com/domain-name-generator/healthy%20food

2)Прокрутите до нижнего раздела под названием Условия использования Википедии .

3) PayPal us $ 1000.Просто шучу.:) Ищите текст Пыльный Донован .Это должно очистить все поплавки выше и выстроиться в первой колонке.Вместо этого он выравнивается в третьем столбце.Это также происходит для Boosterthon Fun Run .

Как мы можем исправить эту проблему с форматированием или плавающей точкой?

Спасибо!

Answer 1

Crashalot, это не ошибка CSS, это способ работы float, более высокий float означает, что что-то в следующей «строке» не может плавать дальше влево, чем это, то, что вы искали бы, это CSS3 "multi -columns ", который, как вы, вероятно, догадались, еще не полностью поддерживается, есть сценарии, которые помогают выполнить то же самое, и я полагаю, что некоторые браузеры действительно поддерживают

float всегда был просто хакерским способом - это можно сделать несколько аналогично с inline-блоками вместо float, вы все равно получаете «неравномерный интервал / вертикальные поля», когда есть две позиции, но, по крайней мере, есть равномерное распределение элементов между столбцами и с вертикальным выравниванием, которое вы можете достичь с помощью встроенных блоков, дополнительный интервал может быть равномерно распределен.

пример здесь: в JSBin

Answer 2

Если ваша разметка генерируется динамически, вы можете сделать следующее. Этот пример для 4 столбцов и использует PHP.

1. Установите счетчик, например, $i = 0 когда вы просматриваете свои предметы (очевидно, увеличиваясь на единицу каждый раз).
2. В классе каждого элемента установите для него значение col-<?php echo $i % 4; ?>, т.е. $i модуль 4 для номера столбца.

Итак, вы получите что-то вроде:

<ul>
<li class="col-0">Lorem ipsum</li>
<li class="col-1">Lorem ipsum</li>
<li class="col-2">Lorem ipsum</li>
<li class="col-3">Lorem ipsum</li>
<li class="col-0">Lorem ipsum</li>
<li class="col-1">Lorem ipsum</li>
</ul>

(Конечно, это можно легко сделать и в ручной разметке).

Затем добавьте следующий код CSS (при условии, что у вас уже настроены плавающая и ширина для всех li элементов):

li.col-0 { clear: both; }

Кажется, работает хорошо!

Answer 3

Это ожидаемое поведение, элемент до этого имеет 2 строки и искажает поплавки. Если вас не волнует ie6, проверьте эту скрипку http://jsfiddle.net/kuyabiye/9YFzW/

Если вам небезразлично ie6, кажется, что единственный способ установить одинаковую высоту или использовать решение javascript равной высоты или организовать разметку, объединяющую 3 столбца, как показано ниже

<ul class="clearfix">
<li>col 1</li>
<li>col 2</li>
<li>col 3</li>
</ul>

Answer 4

Одна вещь, которую вы могли бы сделать, это установить явную высоту для элементов li, а затем заставить переполнение быть видимым.

#wiki_terms li {
  float: left;
  width: 170px;
  margin-right: 30px;
  height: 30px;
  overflow: visible;
}

Не самое элегантное из решений, но обходной путь, если у вас нетдругой вариант.