Выравнивание блоков html

408
28 декабря 2016, 02:48

В общем, стоит задача сделать галерею для портфолио, блоки располагаются ровно один под одним

но по макету нужно чтоб они заплывали друг под друга вот так, подскажите, пожалуйста, как это реализовать? заранее спсибо

Answer 1

Воспользуйтесь column-count, так мы будем знать, сколько у нас column в каждом размере экрана и сможем управлять нашим responsive , column-fill: auto; даст нам высоту div такой, какая она есть, потому что, мы не знаем заранее нашу высоту дива. Пользователь может написать 1 строку или 10 - ответ найдете пример1 и пример2 надеюсь помогло

Answer 2

Просто положите нужные вам блоки в одну колонку.

Если что высоту элементам можно не задавать, это просто для демонстрации. Пример для демонстрации:

div { 
  color: white; 
} 
 
.column { 
  float: left; 
  width: 300px; 
} 
 
.one { 
  background-color: orange; 
  height: 100px; 
} 
 
.two { 
  background-color: lime; 
  height: 150px; 
} 
 
.three { 
  background-color: #ccc; 
  height: 150px; 
} 
 
.four { 
  background-color: purple; 
  height: 250px; 
}
<div class="column"> 
  <div class="one"> 
    One 
  </div> 
  <div class="three"> 
    Three 
  </div> 
</div> 
 
<div class="column"> 
  <div class="two"> 
    Two 
  </div> 
  <div class="four"> 
    Four 
  </div> 
</div>

READ ALSO
Переход по ссылке js

Переход по ссылке js

Хочу узнать у опытных программистов, возможно ли реализовать переход по ссылке, но так чтоб оказаться на определенном блоке страницы, а не в ее начале,...

388
Не отображается страница в uc browser

Не отображается страница в uc browser

Вот страница, которая не отображается https://dandirectorgithub

420
Что не так с кодом? (Angularjs, Json)

Что не так с кодом? (Angularjs, Json)

Необходимо следующее:

352
Схема редактирования записи

Схема редактирования записи

Есть две формыВ первой список клиентов, вторая форма для редактирования записи

360