Двустолбчатый макет сайта

08.10.2023 Марат 107 0 html|каркас_страницы

Один из следующих шагов в понимании макетов : "двустолбчатый макет сайта". Или "двустолбцовый макет сайта"(если вам так больше нравится). Рассмотрим несколько вариантов макета из двух столбцов, с примерами.

Типичный пример двустолбчатого макета сайта - это "youtube".

Пошагово "двустолбчатый макет сайта".

Двустолбчатый макет на div.
Двустолбчатый макет с flex.
Двустолбчатый макет сайта на display: table
Двустолбчатый макет сайта на table

Двустолбчатый макет на div.

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


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

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

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

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

Поэтому

Пусть столбцы будут 50% т.е. половина всей ширины и ещё немного стилей(бордюр для очертания границ столбцов):


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

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

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

Двустолбчатый макет сайта на flex

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

Код двустолбчатого макета на flex:


<!DOCTYPE html>
<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: 50%;
  padding: 10px;
  border: 1px solid #d6d6d6;
}
</style>
</head>
<body> 
<div class="row">
  <div class="column">
    <h2>Столбец 1</h2>
    <p>Некоторый текст..</p>
  </div>
  <div class="column">
    <h2>Столбец 2</h2>
    <p>Некоторый текст..</p>
  </div>
</div>
</body>
</html>

Пример двустолбчатого макета на flex:

пример двустолбчатого макета на flex:

Двустолбчатый макет сайта на display: table

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Пример двустолбчатый 3</title>
<style>
body {  margin: 0px; }
.row {
    display: table;
    width: 100%;
}
html, body, .row{  height: 100%; }
.column {
	display: table-cell;
	width: 50%;
	padding: 10px;
	border: 1px solid #d6d6d6;
}
</style>
</head>
<body>
<div class="row">
  <div class="column">
    <h2>Столбец 1</h2>
    <p>Некоторый текст..</p>
  </div>
  <div class="column">
    <h2>Столбец 2</h2>
    <p>Некоторый текст..</p>
  </div>
</div>
</body>
</html>

Пример двустолбчатого макета на display: table:

пример двустолбчатого макета на display: table:

Двустолбчатый макет сайта на table

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

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


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

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

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