Как из ДИВ-блоков верстают сайты с двумя и более колонками, ведь по умолчанию ДИВ-блоки располагаются один под другим?

@usit · Регистрация: 19.08.2015

Author24 — интернет-сервис помощи студентам

Большинство сайтов имеют боковые колонки (так называемые сайтбары), как их делают с помощью блочной div вёрстки, как эти колонки располагают горизонтально на одной строке?

@DrType · 28.02.2020, 00:00

usit, Вы хотите сверстать Священный Грааль. Я вижу выход из положения в активном применении flex-контейнеров.
Без использования display:flex это сделать тоже можно, но неудобно

Добавлено через 2 минуты
Также в помощь grid элементы.

@novichek_1905 · 28.02.2020, 00:48

HTML5

<main class="main">
  <header class="header"></header>
  <div class="content content-1"></div>
  <div class="content content-2"></div>
  <div class="content content-3"></div>
  <footer class="footer"></footer>
</main>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.main {
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content auto;
}
.header,
.footer {
  padding: 20px;
  grid-column: 1/4;
}
 
.header {
  background-color: darkred;
}
 
.footer {
  background-color: darkgreen;
}
.content-1 {
  background-color: yellow;
}
.content-2 {
  background-color: darkblue;
}
.content-3 {
  background-color: brown;
}

@Panda58dev · 28.02.2020, 17:40

Сообщение от usit

так называемые сайтбары

раньше это делалось с помощью float-ов, но на данный момент такая система позиционирования устарела, поэтому, как сказал DrType, это сделать можно с помощью flex-ов, т.к. элемент становится... точно не скажу, или строчным, или строчно-блочным. И это удобно, ведь с помощью flex-directon можно менять направление блоков: либо горизонтальное, либо вертикальное.

@usit 1 / 1 / 0 Регистрация: 19.08.2015 Сообщений: 93
		1
	Как из ДИВ-блоков верстают сайты с двумя и более колонками, ведь по умолчанию ДИВ-блоки располагаются один под другим? 27.02.2020, 23:04. Показов 1383. Ответов 3 Метки нет (Все метки) Большинство сайтов имеют боковые колонки (так называемые сайтбары), как их делают с помощью блочной div вёрстки, как эти колонки располагают горизонтально на одной строке? Миниатюры 0

@DrType 6458 / 3603 / 1074 Регистрация: 07.09.2019 Сообщений: 5,842 Записей в блоге: 1
	28.02.2020, 00:00	2
	usit, Вы хотите сверстать Священный Грааль. Я вижу выход из положения в активном применении flex-контейнеров. Без использования `display:flex` это сделать тоже можно, но неудобно Добавлено через 2 минуты Также в помощь grid элементы. 1

@Panda58dev Developer☭ 210 / 112 / 24 Регистрация: 01.02.2019 Сообщений: 505 Записей в блоге: 2
	28.02.2020, 17:40	4
	Сообщение было отмечено usit как решение Решение Сообщение от usit так называемые сайтбары раньше это делалось с помощью float-ов, но на данный момент такая система позиционирования устарела, поэтому, как сказал DrType, это сделать можно с помощью flex-ов, т.к. элемент становится... точно не скажу, или строчным, или строчно-блочным. И это удобно, ведь с помощью `flex-directon` можно менять направление блоков: либо горизонтальное, либо вертикальное. 1

Как из ДИВ-блоков верстают сайты с двумя и более колонками, ведь по умолчанию ДИВ-блоки располагаются один под другим?

Решение