CSS3 многострочный макет IE обходной путь

Сегодня я наткнулся на действительно отличный проект (CSS3 PIE), который позволяет использовать скругленные углы, тени и градиенты CSS3 даже в IE6, IE7 и IE8 с использованием настроек CSS и обычной нотации CSS3.

Он использует *.htc файл, который делает обман и делает его действительно прозрачным для разработчиков (как в его настройке, так и при забытии), никаких дополнительных вызовов script при создании новых страниц или изменении существующих (если вы не меняете CSS)).

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

Кто-нибудь разрабатывает нечто похожее для многострочной раскладки CSS3?

Ответ 1

Возможно, Плагин jQuery для столбцов

К сожалению, он не анализирует вашу таблицу стилей и ищет соответствующие свойства, такие как CSS3 PIE (очень удобная функция).

Оба CSS3 PIE и этот плагин полагаются на JavaScript.

Ответ 2

Другое решение для списков, которые должны поступать в порядке столбцов (как в телефонных книгах)

Я задал вопрос главным образом потому, что мне пришлось отображать список из примерно 1000 пользователей. Этот список очень длинный и включает в себя много прокрутки. Поэтому мне нужно было решение разместить этих пользователей в столбцах, чтобы они также перетекали сверху вниз столбцом по столбцу слева направо. CSS3 многоколоночный макет обеспечивает именно то, что мне нужно, но проблема с поддержкой браузера. Они по-прежнему не поддерживаются в IE9, и мои пользователи в основном используют IE (8 или 9). Поэтому мне нужно решение для работы с использованием CSS2.1

В этой причине я написал плагин jQuery, который принимает набор элементов, которые либо установлены на float: left/right;, либо display: inline-block; и переносят их так, чтобы они упорядочивались в порядке расположение столбцов.

Плагин переупорядочивает элементы и не добавляет никаких оберток столбцов или что-то еще. Он просто перестраивает элементы, поэтому они, кажется, текут в столбцах вместо строк.

Вы можете проверить мое сообщение в блоге, где проблема подробно описана, и вы также можете увидеть рабочий пример, который перестраивает/переносит США. Или вы также можете смотреть проект на GitHub и получать обновления, когда новая версия отсутствует (или сообщить о проблемах, которые могут возникнуть с ней).

Ответ 3

Если у вас есть простые элементы списка, этого может быть достаточно https://github.com/hamsterbacke23/multicolumn-polyfill

Ответ 4

вам может понравиться попробовать этот.

CSS3 Multi Columns

прошло некоторое время, так как я проверил его, но это означает, что вы используете предлагаемые свойства, чтобы его можно было использовать в качестве улучшения

Я посмотрю, смогу ли найти свой тестовый пример, чтобы поставить скрипку

Обновление

здесь Пример скрипки

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

Верхняя половина показывает, что поддерживается или что может сделать script, если вы ее загрузите, дно - это (на основе таблицы) макет ожиданий в соответствии с рекомендациями (хотя помните, что я сказал это несколько лет с тех пор, как я сделал это)

ни Safari, ни Firefox не совпадают с "Ожидаемой демонстрацией табличного макета", но все браузеры, которые я тестировал в локальном режиме, выглядят одинаково.. с хорошими четными столбцами, IE7 получает 50% прав, имеет 3 столбца, но использует только 2 из них?? - ни один браузер не заголовок, охватывающий несколько строк, ни изначально, ни с помощью script, поэтому я помещал это в "еще не принятое решение";)

в любом случае просто выбрасывать его там как вариант - может быть, кто-то с более сообразительным, чем я, мог бы улучшить script?