Адаптивный веб-дизайн для n столбцов с произвольной высотой портлетов
Кратко:
Как разместить N столбцов портлетов произвольной высоты в CSS, чтобы при изменении размера браузера количество столбцов уменьшалось (с помощью @media (min-width:)), и портлеты по-прежнему удобно размещались на странице с нет пробелов.
Это похоже на Float несколько блоков фиксированной ширины / переменной высоты в 2 столбца, но более общее.
Деталь:
Я создал веб-приложение (PHP / Zend Framework) со страницей "приборной панели", состоящей из серии портлетов. Портлеты могут быть расположены в 1, 2, 3 или 4 столбцах одинаковой ширины (по выбору пользователя) в макете с текучей средой. Когда пользователь изменяет размер окна браузера, столбцы расширяются, чтобы заполнить доступную ширину, а портлеты также расширяются по горизонтали. Высота каждого портлета по вертикали определяется его содержимым. Некоторые из них всего 1-2 строки, другие могут быть 30-40+ строки текста / таблицы / изображения и т. Д.
Я хочу превратить это в "адаптивный дизайн", чтобы пользователю не приходилось выбирать количество столбцов. На маленьком экране (например, iPhone) будет отображаться только один столбец. На широком экране они могут иметь 4 или 5 столбцов. Если размер окна браузера изменяется, количество столбцов будет увеличиваться или уменьшаться, чтобы позволить портлетам иметь ширину около 300-400 пикселей.
Я думаю, что я могу сделать это с небольшим количеством jQuery и некоторой поддержкой на стороне сервера (PHP), но предпочел бы делать все это в CSS, если это возможно (нет / минимальный JavaScript).
1 ответ
Используйте комбинацию медиа-запросов и выравнивания текста, чтобы добиться этого:
В своем естественном состоянии text-align: justify не будет работать, если содержимое строки не будет достаточно длинным, чтобы вызвать разрыв строки. В противном случае текст остается выровненным по левому краю. Мы можем решить эту проблему, предоставив 100% ширину невидимому встроенному элементу в конце строки.
Поскольку "text-align: justify" предназначен для работы с отдельными встроенными словами, он работает с любым встроенным элементом и, что более важно, с любым элементом встроенного блока.
Чтобы учесть любое и все возможное количество элементов в последней строке, количество элементов-заполнителей, которые вам нужно будет добавить, равно максимальному количеству элементов в строке, минус 2. Эти элементы должны быть вставлены в конце вашу сетку (перед элементом "break", если вы не используете псевдоэлемент для разбиения строки), а затем оставьте в покое. Так как они не занимают вертикального пространства, элементы "местозаполнителя" не будут влиять на макет, если последняя строка заполнена или если ваш сайт отзывчив и количество элементов в строке изменяется. Пока у вас достаточно заполнителей для самого широкого обзора, все будет в порядке.
Очевидно, что это имеет некоторые смысловые последствия, поскольку невозможно создать какой-либо из этих заполнителей с использованием псевдоэлементов. В сетке, где в последней строке всегда будет максимальное количество элементов, нам вообще не нужно использовать заполнители (просто разрыв), но в большинстве ситуаций CMS они необходимы и должны быть жестко закодированы в ваш HTML,
Просто применив text-align: justify к контейнеру и предоставив дочерним элементам display: inline-block и ширину в процентах, вам больше никогда не придется иметь дело с горизонтальными полями! (Да, и я уже говорил, что при использовании этого трюка вам больше никогда не понадобится использовать float для ваших элементов, так что вы можете махнуть на прощание этим позорным clearfixes и clear divs тоже!)
Мы должны знать, что при использовании display: inline-block наши элементы будут зависеть от различных типографских свойств CSS, включая размер шрифта, высоту строки, выравнивание по вертикали и расстояние между словами. Эти свойства будут иметь видимое влияние на пробелы вашего макета, но могут быть легко скорректированы или удалены по мере необходимости. В 99% случаев настройка 'font-size: 0.1px;' к контейнеру и 'vertical-align: top' к дочерним элементам должны сделать свое дело.
Рекомендации