Трехстолбчатый/трехстолбцовый макет сайта

11.10.2023 Марат 115 0 html|каркас_страницы

Наиболее часто встречаемый макет сайтов - это "трехстолбчатый" или если хотите "трехстолбцовый макет сайта".

В прошлый раз я рассматривал макет страницы с меньшим количеством столбцов.

Сегодня тоже самое, но добавим третий столбец посередине... с шириной в 60%, а столбцы по бокам будут 20%.

Напоминаю! Что это всего лишь начальная схема построения макета из трех столбцов!

И естественно, что её ещё надо дорабатывать !

Пошагово "трехстолбчатый/трехстолбцовый макет сайта".

трехстолбчатый/трехстолбцовый макет на div.
трехстолбчатый/трехстолбцовый макет с flex.
трехстолбчатый/трехстолбцовый макет сайта на display: table
трехстолбчатый/трехстолбцовый макет сайта на table

Трехстолбчатый/трехстолбцовый макет на div.

Первый трехстолбчатый/трехстолбцовый макет, который приходит на ум может быть сделан из div.


<div>
  <div>первый столбец</div>
  <div>второй столбец</div>
  <div>третий столбец</div>
</div>

Но если мы его вот так поместим на страницу, то естественно, что блоки выстроятся в один столбец и будут находится друг над другом, поскольку они имеют оба значение по умолчанию "display:block".

первый столбец

второй столбец

третий столбец

Поэтому

Добавим стилей и ... пусть столбцы будут шириной 20%, а центральный столбец шириной 60%(100% - (20% х 2) = 60% ) и ещё немного стилей(бордюр для очертания границ столбцов):


<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <title>Пример трехстолбчатый/трехстолбцовый 1</title>
  </head>
<style>
* { box-sizing: border-box; }
body {  margin: 0px; }
html, body, .line, .column, .center{  height: 100%; }
.column, .center { 
    float: left;
    border: 1px solid;
}
.column { width: 20%; }
.center { width: 60%; } 
</style>
  <body> 
  <div class="line">
    <div class="column">первый столбец</div>
    <div class="center">второй столбец</div>
    <div class="column">третий столбец</div>
  </div>
  </body>
</html>

Пример трехтолбчатого/трехстолбцового дизайна:

на всём экране

Трехстолбчатый/трехстолбцовый макет сайта на flex

Второй вариант трехтолбчатого/трехстолбцового дизайна - использование в стилях flex, здесь и далее на странице

Столбцы по краям шириной в 20%.

А центральный в 60%(100% - (20% х 2) = 60% ).

Код трехтолбчатого/трехстолбцового макета на flex:


<html>
  <head>
    <meta charset="utf-8">
    <title>Пример трехстолбчатый/трехстолбцовый 2(flex)</title>
<style>
* { box-sizing: border-box; }
body {  margin: 0px; }
.row { display: flex; }
html, body, .row , .column{  height: 100%; }
.column { flex: 20%; }
.center { flex: 60%; } 
.column, .center { 
    padding: 10px;
    border: 1px solid #d6d6d6;
} 
</style>
</head>
<body>
<div class="row">
  <div class="column">
    <h2>Столбец 1</h2>
    <p>Некоторый текст..</p>
  </div>
  <div class="center">
    <h2>Столбец 2</h2>
    <p>Некоторый текст..</p>
  </div>
  <div class="column">
    <h2>Столбец 3</h2>
    <p>Некоторый текст..</p>
  </div>
</div>
</body>
</html

Пример трехтолбчатого/трехстолбцового макета на flex:

пример трехтолбчатого/трехстолбцового макета на flex:

Трехстолбчатый/трехстолбцовый макет сайта на display: table

Третий вариант трехтолбчатого/трехстолбцового дизайна - использование в стилях display: table:


<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <title>Пример трехстолбчатый/трехстолбцовый 3(display: table)</title>
<style>
* { box-sizing: border-box; }
body {  margin: 0px; }
.row {
    display: table;
    width: 100%;
}
html, body, .row {  height: 100%; }
.column { width: 20%; }
.center { width: 60%; }
.column, .center{
  display: table-cell; 
  padding: 10px;
  border: 1px solid #d6d6d6;
}

</style>
</head>
<body> 
<div class="row">
  <div class="column">
    <h2>Столбец 1</h2>
    <p>Некоторый текст..</p>
  </div>
  <div class="center">
    <h2>Столбец 2</h2>
    <p>Некоторый текст..</p>
  </div>
  <div class="column">
    <h2>Столбец 3</h2>
    <p>Некоторый текст..</p>
  </div>
</div>
</body>
</html>

Пример трехтолбчатого/трехстолбцового макета на display: table:

пример трехтолбчатого/трехстолбцового макета на display: table:

Трехстолбчатый/трехстолбцовый макет сайта на table

Четвертый вариант трехтолбчатого/трехстолбцового дизайна - будем и использовать table:

Код трехтолбчатого/трехстолбцового макета на таблицах:


<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <title>Пример трехстолбчатый/трехстолбцовый 4(table)</title>
<style>
body { margin: 0px; }
.row { width: 100%; }
html, body, .row {  height: 100%; }
.column, .center {
  padding: 10px;
  border: 1px solid #d6d6d6;
        vertical-align: top;
}
.column { width: 20%; }
.center { width: 60%; }
</style>
</head>
<body> 
<table class="row">
  <tr>
  <td class="column">
    <h2>Столбец 1</h2>
    <p>Некоторый текст..</p>
  </td>
  <td class="center">
    <h2>Столбец 2</h2>
    <p>Некоторый текст..</p>
  </td>
  <td class="column">
    <h2>Столбец 3</h2>
    <p>Некоторый текст..</p>
  </td>
 </tr>
</table>
</body>
</html>

Пример трехтолбчатого/трехстолбцового макета на таблицах:

пример трехтолбчатого/трехстолбцового макета на таблицах