Макет из трёх колонок

На странице демонстрация всех существующих макетов, состоящих из трех колонок. Макеты с семантикой HTML и легко адаптируются под разные размеры мобильных устройств используя только свойства CSS.

Макет для сайта из трех колонок

Макет из трех колонок таблицей HTML

Самый простой способ создать макет из трех колонок создать таблицу HTML. Преимущество макета поддержка всеми существующими браузерами. Проблема макета адаптировать под разные размеры экрана без дополнительных библиотек JavaScript.

HTML



<table>
 <tbody>
  <tr>
    <th colspan="3" class="header">
        <h1>Заголовок</h1>
        <h2>Верхний колонтитул</h2>
    </th>
  </tr>
  <tr>
    <td class="sidebar"><h3>Колонка 1</h3></td>
    <td class="article"><h1>Колонка 2</h1></td>
    <td class="aside"><h3>Колонка 3</h3></td>
  </tr>
  <tr>
    <td colspan="3" class="footer">
       <h4>Нижний колонтитул</h4>
    </td>
  </tr>
  </tbody>
</table>


CSS



table {
	width: 100%;
	text-align: center;
}
td {
	vertical-align: top;
}
.header, .footer {
	background: #f0e68c;
	height: 100px;
}
.article {
	background: #afccdb;
}
.sidebar, .aside {
	width: 250px;
	background: #fc0;
}
.footer {
	background: #D2B48C;
}


Демо

Макет из трёх колонок слева и справа

Этот макет из трёх колонок поддерживается всеми браузерами. Посмотрите внимательно на HTML сначала идут боковые колонки, а затем колонка для содержания. Для разметки колонок применяются свойство CSS float: . Проблема этого макета отобразить видимую часть содержания для мобильных устройств.

HTML



<div class="sidebar">
   <h3>Колонка 1</h3>
</div>
<div class="aside">
   <h3>Колонка 3</h3>
</div>
<div class="article">
    <h1>Колонка 2</h1>
</div>


CSS



.article {
	background: #afccdb;
	padding-top: 1px;
}
.sidebar, .aside {
	width: 250px;
	background: #fc0;
	float: left;
}
.aside {
	float: right;
}


Демо

Далее похожий макет, разница только в то что все колонки обтекают слева.

HTML



<div class="sidebar">
     <h3>Колонка 1</h3>
  </div>
  <div class="article">
     <h1>Колонка 2</h1>
  </div>
  <div class="aside">
     <h3>Колонка 3</h3>
  </div>


CSS



.sidebar, .aside, .article {
	float: left;
}


Демо

Три колонки с относительной позицией

Макет с тремя колонками с относительной позицией уникальный. Я не видел, что бы этот способ разметки CSS применяли для веб-сайтов, состоящих из трёх колонок, но как макет для всех существующих браузеров вполне подходит.

HTML



<div class="main">
  <div class="content col">
    <h1>Колонка 2</h1>
  </div>
  <div class="sidebar col">
    <h3>Колонка 1</h3>
  </div>
  <div class="aside col">
    <h3>Колонка 3</h3>
  </div>
</div>


CSS



.main {
	padding-left: 220px;
	padding-right: 260px;
}
.col {
	position: relative;
	float: left;
}
.content {
	background: #afccdb;
	width: 100%;
}
.sidebar, .aside {
	width: 260px;
	right: 260px;
	margin-left: -100%;
	background: #fc0;
}
.aside {
	margin-right: -260px;
	margin-left: 0;
	right: 0;
}


Демо

Макет из трёх колонок с отступом

Следующий макет из трёх колонок также поддерживается всеми браузерами. Для разметки макета используются свойства CSS, где указан отступ в содержании для правой колонки в процентах. Макет легко адаптировать под разные размеры экрана мобильных устройств без JavaScript. В настоящее время это самый оптимальный макет для веб-сайта из трёх колонок.

HTML



<div class="main">
 <div class="artile">
   <h1>Колонка 2</h1>
</div>
</div>
<div class="sidebar">
   <h3>Колонка 3</h3>
</div>
<div class="aside">
   <h3>Колонка 1</h3>
</div>


CSS



.main {
	float: left;
	width: 100%;
	background: #afccdb;
}
.artile {
	margin-left: 250px;
	margin-right: 21.22%;
}
.sidebar {
	margin-left: -29.0476%;
	width: 21.24%;
	float: right;
	background: #fc0;
}
.aside {
	width: 250px;
	float: left;
	margin: 0 0 0 -100%;
	min-height: 100vh;
	background: #fc0;
}


Демо

Это последний макет с тремя колонками для всех существующих браузеров. Следующие демонстрации макетов из трёх колонок будут с разметкой HTML5 и свойствами CSS3 .

Макет в три колонки HTML5 и CSS3 flex

Из новых технологий макет flex наиболее подходящий для веб-сайта состоящий из трёх колонок. Макет flex работает во всех современных браузерах и имеет большой потенциал. Макет flex с семантической разметкой HTML5 и его легко адаптировать для разных размеров экрана, используя  CSS3 Media Queries .

HTML



<main>
   <article>
      <h1>Колонка 2</h1>
   </article>
   <nav>
      <h3>Колонка 1</h3>
   </nav>
   <aside>
      <h3>Колонка 3</h3>
   </aside>
</main>


CSS



main {
	display: flex;
	background: #afccdb;
}
main > article {
	order: 2;
	min-width: 12em;
	flex: 1;
}
main > nav {
	order: 1;
	width: 18%;
	background: #fc0;
}
main > aside {
	order: 3;
	width: 18%;
	background: #fc0;
}
@media all and (max-width:768px) {
main {
	flex-flow: column;
}
main > article, main > nav, main > aside {
	order: 0;
	width: auto;
}
}


Демо

Макет три колонки HTML5 и CSS3 flex grid

HTML



<main>
  <article>
     <h1>Колонка 2</h1>
  </article>
  <nav>
     <h3>Колонка 1</h3>
  </nav>
  <aside>
     <h3>Колонка 3</h3>
  </aside>
</main>


CSS



main {
	height: 100%;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-flow: row;
	flex-flow: row;
}
main > article {
	background: #afccdb;
	-webkit-flex: 3 1 70%;
	flex: 3 1 70%;
	-webkit-order: 2;
	order: 2;
}
main > nav {
	background: #fc0;
	-webkit-flex: 1 6 20%;
	flex: 1 6 20%;
	-webkit-order: 1;
	order: 1;
}
main > aside {
	background: #fc0;
	-webkit-flex: 1 6 20%;
	flex: 1 6 20%;
	-webkit-order: 3;
	order: 3;
}
@media all and (max-width: 640px) {
main {
	-webkit-flex-flow: column;
	flex-flow: column;
	flex-direction: column;
}
main > article, main > nav, main > aside {
	-webkit-order: 0;
	order: 0;
}
}


Демо

Макет на три колонки CSS calc ()

Умная функция CSS calc () имеет свойства разбивать ширину на части в нашем случае их три. Функцию calc () понимают все современные браузеры и даже IE9. Макет с лёгкостью адаптируется для разных размеров экрана мобильных устройств.

HTML



<div class="sidebar">
   <h3>Колонка 1</h3>
</div>
<div class="artile">
   <h1>Колонка 2</h1>
</div>
<div class="aside">
   <h3>Колонка 3</h3>
</div>


CSS



.sidebar, .aside {
	width: calc(50% / 3);
	background: #fc0;
	float: left;
}
.artile {
	width: calc(200% / 3);
	background: #afccdb;
	float: left;
}
@media all and (max-width:768px) {
.sidebar, .aside, .artile {
	width: calc(300% / 3);
	clear: both;
	height: initial;
}
}


Демо

Макет в три колонки display table

Для разметки тегов HTML5 макет использует свойства CSS display:table- и без проблем адаптируется для всех размеров экрана мобильных устройств.

HTML



<header>
   <h1>Заголовок</h1>
   <h2>Верхний колонтитул</h2>
</header>

<main>
	<nav>
       <h3>Колонка 1</h3>
    </nav>
	<article>
       <h1>Колонка 2</h1>
    </article>
	<aside>
       <h3>Колонка 3</h3>
    </aside>
</main>

<footer>
   <h4>Нижний колонтитул</h4>
</footer>


CSS



header, footer {
	background: #f0e68c;
	height: 100px;
}
main {
	margin:0 auto;
	display: table;
	width:100%;
}
nav, article, aside {
	box-sizing: border-box;
	display:table-cell;
}
nav, aside {
	background: #fc0;
	width:18%;
}
article {
	background: #afccdb;
	height: 500px;
}
@media only screen and (max-width:768px) {
   article { display:table-caption; }
   header { display:table-header-group; }
   footer { display:table-footer-group; }
}


Демо

Заключение

Теперь вы знаете какие бывают макеты, состоящие из трёх колонок. Какой макет использовать решать вам. Если вы знаете еще способы создать макет для веб-сайта с тремя колонками дайте мне знать в комментариях ниже.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>