Главная > HTML CSS JS > Резиновый шаблон на div (слоях) и css

Резиновый шаблон на div (слоях) и css

Много решений в инете, о конструировании на слоях шаблонов страниц, но под мою задачу не было. Вот решил поделиться. ТЗ:
  • Три колонки (ничего нового, в принципе - не важно сколько их)
  • Все растягивается по ширине, пропорционально: левая - 20%; правая - 20%; центральная - 60% (ничего нового)
  • Слои не должны переноситься при ресайзе окна (тоже логично, но немного конфликтует со следующим пунктом)
  • При ресайзе слои должны ужиматься до минимально размера в 300px - левая и правая колонки, 400px - центральная
А проблема в том, что 300px получается больше 20% при общей ширине в 1000px, и слои переносятся если места не хватает. Итак, решение:
  • Ограничиваем слои в сжатии
  • Задаем параметры ширины в соответствии с ТЗ
  • Боковые слои выравниваем налево и направо. И обтекаем их центральным
Вот как-то так. Смотрим на практике: Демо Текст примера: На что обратить внимание:
  1. Сначала идут слои левый и правый. Только потом основной - это важно, т.к. их придется обтекать текстом - а для этого они должны быть до текста.
  2. Для левого и правого слоя указываем width - ширину в процентах; и min-width - минимальную ширину в пикселях;
  3. Для центрального блока задаем только минимальную ширину (он растянется тогда но, но будет обтекать... вот так вот жестко получается :p )
  4. И нужен контейнер - блок, который не сожмется меньше, чем суммарная минимальная ширина слоев. Иначе они начнут переноситься, начиная с центрального.
Еще пара примеров: Если нужно, что бы блоки были слева, (показывается, что все равно куда выравнивать...) Демо2 Если процентное соотношение совпадает с минимальным пиксельным соотношением размеров слоев (20% 20% 60% и 200px, 200px, 600px) Здесь для центрального блока указываем width:60% и float:left Это не очень хороший вариант, т.к. проценты есть проценты, и дробные значения округлятся. А значит при определенной ширине будет появляться зазор (справа от блоков - учитывая, что меняем выравнивание и порядок блоков. если не менять - то между центральным и правым) Демо3 Стили второго примера (только стили немного поменялись): Листинг третьего примера (Меняем стили и порядок блоков):
1 звезда2 звезды3 звезды4 звезды5 звезд (1 votes, average: 5,00 out of 5)
Загрузка...
  1. Пока что нет комментариев.
  1. Пока что нет уведомлений.


7 + = тринадцать

Heads up! You are attempting to upload an invalid image. If saved, this image will not display with your comment.