Как использовать трехколоночные макеты в CSS3 - макеты

Трехколонные макеты в CSS3 обычно используются на сайтах, которые предоставляют список общих ссылки на одной стороне страницы, контент посередине, а также ссылки на рекламу или страницу с другой стороны.

Страницы макетов динамического диска показывают одно использование этого макета, где вы видите список предложений в левой панели, фактические макеты в области содержимого и список спонсоров в правой панели.

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

Вы можете увидеть список трех раскладок столбцов в библиотеке CSS. Как и в случае двухстолбцовых макетов, вы найдете сочетание фиксированных и жидких макетов при работе с трехколоночными макетами.

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

Один тип трехколоночного макета, отсутствующий на этом сайте, - это тот, в котором два столбца выровнены, один поверх другого. Эта форма обычно используется для онлайн-документации, такой как Java 7 API.

Один из способов решения этой проблемы - использовать другой продукт, например плагин UI Layout для jQuery. Другой альтернативой является изменение CSS Fixed Layout # 3. 3- (фиксированная-фиксированная) макет.

Вам не нужно вносить какие-либо изменения в HTML-часть этого примера. Версия макета HTML5 выглядит так. (Вы можете найти полный код для этого примера в папке Chapter 07 загружаемого кода в виде ThreeColumnHelpLayout. HTML.)

Исправлена ​​компоновка CSS # 3. 3- (исправлена ​​фиксированная фиксированная)

Исправлена ​​компоновка CSS # 3. 3- (Fixed-Fixed-Fixed)
Колонка контента: Исправлено 
Левый столбец: 180px 
Правый столбец: 190px 
Нижний колонтитул

CSS начинается с код, предоставленный сайтом. Чтобы изменить этот код, чтобы предоставить формат, необходимый для справки, вам нужно внести несколько небольших изменений. Следующая процедура рассказывает вам, как это сделать.

1. Измените свойство margin-left для стиля #rightcolumn на -840px.

   Это изменение делает правый и левый столбцы равными.

2. Измените свойство width для стиля #rightcolumn на 180px.

   Это изменение делает правый и левый столбцы равными ширинами.

3. Добавьте значение свойства высоты 250px как для стилей #leftcolumn, так и для #rightcolumn.

   Это изменение позволяет обоим столбцам использовать половину доступного пространства для контента.

4. Добавьте значение свойства margin-top 250px в стиль #rightcolumn.

   Это изменение помещает правый столбец ниже левого столбца.

5. Загрузите полученную страницу в свой браузер.

   Вы видите трехколоночный макет, подобный этому:

   

Шаблоны Dynamic Drive являются гибкими и часто могут выполнять другие задачи с небольшими изменениями. Важно начать с макета, который близок к тому, что вы хотите использовать.