Заполнить пустое место

Question

Как показано ниже, фиолетовый, голубой и желтый расположены ниже. Я бы хотел, чтобы они заполнили пространство над ними. У меня есть исправление 4 столбца на строку, но высота каждого столбца не будет исправлена. Как я могу сделать эту динамику?

Answer 1

использование

display : inline-block; 
float : left; 
clear : none 

Answer 2

Использование Flexbox макета для получения этого.

Что-то вроде ниже поможет. Используйте css ниже в контейнере ящиков, а затем установите ширину и высоту полей. высота может быть динамической. либо установите высоту ящиков как автоматическое или процентное значение.

.container{ 
    width:200px; 
    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    -ms-flex-wrap: wrap; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 100vw; 
}