Как расположить блоки (по вертикали) по три в ряд?

293

10 февраля 2017, 02:29

Здравствуйте!

Что-то не придумать мне как располагать блоки по три в вертикальный ряд, может вы подскажите?

Есть форма с горизонтальным скроллом.

Надо что бы она наполнялась по принципу: сначала вниз до трёх, потом в следующий ряд (правее).

Наглядно это выглядит примерно так:

[1]
[2]

Потом

[1][4]
[2][5]
[3]

Ну и так далее:

[1][4][7]
[2][5]
[3][6]

Answer 1

Всё решилось с помощью flex`a :)

.wrapper { 
	display: flex; 
	flex-direction: column; 
	flex-wrap: wrap; 
	height: 400px; 
} 
.wrapper .item { 
	width: 25%; 
	height: 200px; 
	background-color: gray; 
	display: flex; 
	justify-content: center; 
    align-items: center; 
    font-size: 50px; 
 
}

<div class="wrapper"> 
	<div class="item">1</div> 
	<div class="item">2</div> 
	<div class="item">3</div> 
	<div class="item">4</div> 
	<div class="item">5</div> 
	<div class="item">6</div> 
	<div class="item">7</div> 
</div>

Answer 2

Вариант flexbox

.container { 
   height:200px; 
  width:500px; 
  display:flex; 
  flex-flow: column wrap; 
 } 
   
.item { 
   margin:20px 2px; 
  background:red; 
  widtth:20px; 
  }

<div class="container"> 
   <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
  <div class="item">4</div> 
  <div class="item">5</div> 
  <div class="item">6</div> 
  <div class="item">7</div> 
  <div class="item">8</div> 
  <div class="item">9</div> 
   <div class="item">10</div> 
  </div>

Вариант c columns

.container { 
    columns: 130px 6; 
    column-gap: 40px; 
  width:400px 
  } 
.item { 
      padding: 10px; 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
  }

<div class="container"> 
   <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
  <div class="item">4</div> 
  <div class="item">5</div> 
  <div class="item">6</div> 
  <div class="item">7</div> 
  <div class="item">8</div> 
   <div class="item">9</div> 
  <div class="item">10</div> 
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поведение метода stop()

Есть блок и скрытый абзацПри щелчке по блоку абзац анимационно появляется

282

HTML

Как подключить php скрипт?

Как подключить PHP скрипт к файлу HTML без вкраплений кода, чтобы код выполнялся при загрузке страницы?

470

HTML

как сделать? индекс или прозрачность или что?

Как сделать так чтоб выпадающее было поверх слайдера?

301

HTML

Сделать все меньше

Верстал сайт и забыл что все время у меня % в браузере стоял 80(ctrl и два раза колесиком мыши на себя) теперь когда ставлю нормальный показ (100%)...

327