Вертикальное и горизонтальное выравнивание блоков

266

06 июля 2017, 00:25

Есть блоки, которые надо красиво расположить, я использовал flex, но у меня после перевода на новую строку остается место пустое, а надо чтобы там были элементы. Код: https://yadi.sk/d/smAzrtXy3KjwyZ

Answer 1

Делается такое не с помощью flex, а с помощью float

body {margin: 0;} 
 
.parent { 
  display: block; 
  width: 100vw; 
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red; 
  overflow: hidden; 
} 
 
.child { 
  float: left; 
  width: 10vw; 
  height: 10vw; 
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue; 
} 
 
.child.big { 
  width: 40vw; 
  height: 40vw; 
  box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px green, inset -2px -2px 0px green; 
  float: right; 
}

<div class="parent"> 
  <div class="child big"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
</div>

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

Все вопросы

ТОП-10

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

Как обработать событие по нажатию на кнопку?

Нажимаю на кнопку и нужно обработать это событие в jquery

431

HTML

Мониторинг html формы через JS

Решил добавить смайлики на сайт по вот этому примеру https://myrusakovru/php-comments-smile

278

HTML

Переход по input javascript

Всем привет, не получается одна задачка есть 3 input'а нужно что бы при вводе в первый трёх символов focus переходил на другой input так же и при вводе...

346

HTML

Не работает ссылка html + php (MVS)

отрывок кода:

323