См. интсрукция по ruweb.
Трехстолбчатый/трехстолбцовый макет сайта
11.10.2023 / Марат / Смотрели : 24 / html | каркас_страницы |Наиболее часто встречаемый макет сайтов - это "трехстолбчатый" или если хотите "трехстолбцовый макет сайта".
В прошлый раз я рассматривал макет страницы с меньшим количеством столбцов.Сегодня тоже самое, но добавим третий столбец посередине... с шириной в 60%, а столбцы по бокам будут 20%.
Напоминаю! Что это всего лишь начальная схема построения макета из трех столбцов!
И естественно, что её ещё надо дорабатывать !Пошагово "трехстолбчатый/трехстолбцовый макет сайта".
- Трехстолбчатый/трехстолбцовый макет на div.
- Трехстолбчатый/трехстолбцовый макет с flex.
- Трехстолбчатый/трехстолбцовый макет сайта на display: table
- Трехстолбчатый/трехстолбцовый макет сайта на table
-
Трехстолбчатый/трехстолбцовый макет на div.
-
Трехстолбчатый/трехстолбцовый макет сайта на flex
-
Трехстолбчатый/трехстолбцовый макет сайта на display: table
-
Трехстолбчатый/трехстолбцовый макет сайта на table
Первый трехстолбчатый/трехстолбцовый макет, который приходит на ум может быть сделан из 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, здесь и далее на странице
Столбцы по краям шириной в 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:
<!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:
Код трехтолбчатого/трехстолбцового макета на таблицах:
<!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>
Пример трехтолбчатого/трехстолбцового макета на таблицах:
Смотрим пример трехтолбчатого/трехстолбцового макета на таблицах
Последнние комментарии:
14.12.2025 :комменты вернулись!
Марат 
17.03.2026 14:29 Марат 22.02.2026 17:34 Марат 10.01.2026 23:29 Марат 05.01.2026 19:49 Марат 04.01.2026 19:17