Как сделать так, чтобы элементы снова плавали влево? - PullRequest
2 голосов
/ 08 августа 2011

Я думаю, что об этом спрашивали миллион раз, но с разными определениями проблемы. И это, вероятно, либо легко исправить, либо долгое желание от веб-дизайнеров, и до сих пор без ответа. note : я выполнил поиск css float в стеке, но, хотя некоторые выглядят как моя проблема, до сих пор я не нашел подобного.

То, что я пытаюсь сделать, станет ясным, если вы увидите вложение. Я хочу, чтобы они были аккуратно сложены в ряды по 3, где высота каждого элемента <li> разная. Другими словами: самый высокий элемент <li> в строке является ведущим, и следующий ряд элементов должен переноситься под этим. Прямо сейчас элементы в новой строке сталкиваются с содержимым более длинного списка в начале, не позволяя первому элементу новой строки полностью сместиться влево.

Обратите внимание, что я не хочу решать эту проблему с помощью php или js, я думаю, что должно быть чистое решение css ... Потому что с php я, конечно, мог бы добавить класс типа "new-row" в это и примените clear: both к этому, и это обернет. Если я хочу сделать то же самое в CSS, то я не могу без использования плохо поддерживаемых вещей :nth-of-type. Кроме того, блок контента имеет переменную ширину, поэтому иногда в строке 3, а иногда может быть только 2 или до 6.

Кто может помочь?

Screenshot from actual website design and flawed css floats

Ответы [ 3 ]

6 голосов
/ 08 августа 2011

Используйте «display: inline-block» для LI, а не «float: left»

1 голос
/ 08 августа 2011

Я рад, что оказался неправ, но я думаю, что для этого вам нужно использовать таблицы или display: table-* конструкцию. (Я лично пошел бы с таблицами - это это несколько табличных данных.)

Только визуализация таблицы может изменять размер всей строки в соответствии с высотой ее самого высокого элемента.

Это единственный способ сделать это без JS или PHP.

0 голосов
/ 08 августа 2011

используйте jQuery.

Уверен, что это невозможно, используя только CSS. Если вы не собираетесь использовать абсолютное позиционирование и забыть все поплавки вместе.

Надеюсь, я ошибаюсь! :)

(хотелось бы иметь возможность сделать это с CSS)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...