двустолбчатый макет сайта
Один из следующих шагов в понимании макетов : "двустолбчатый макет сайта". Или "двустолбцовый макет сайта"(если вам так больше нравится). Рассмотрим несколько вариантов макета из двух столбцов, с примерами.
Типичный пример двустолбчатого макета сайта - это "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>
Пример двустолбчатого макета на таблицах:
Смотрим пример двустолбчатого макета на таблицах
