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

11.10.2023 Марат 43 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>

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

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