CSS-дисплей встроенного блока: удалите пустое пространство

Question

У меня есть контейнер с большим количеством div, отображаемым встроенным блоком. Но когда один из этих divs выше других, все divs в одной строке имеют пустое место сверху.

.all { 
     text-align: center; 
    } 
    .a { 
     width: 200px; 
     height: 200px; 
     background: red; 
     margin: 20px; 
     display: inline-block; 
    } 
    .b { 
     height: 100px; 
    } 

The problem.

This is what I'm trying to achieve.

Я не знаю, как сделать это.

Answer 1

Невозможно выполнить именно то, что вы изобразили в HTML/CSS, при этом предоставляя любую гибкость или простоту воспроизведения, хотя есть аккуратная библиотека Javascript под названием Packery, которая делает именно то, что вы хотите.

http://packery.metafizzy.co/

EDIT:

Вот рабочий пример того, что вы после использования Packery, с более новыми версиями вы на самом деле не нужно писать Javascript, что делает панель для ввода гораздо ниже ,

http://jsfiddle.net/s9crmo9d/8/

<div id="container" class="js-packery" 
    data-packery-options='{ "itemSelector": ".item", "gutter": 10 }'> 

    <div class="item red small"></div> 
    <div class="item green large"></div> 
    <div class="item orange small"></div> 
    <div class="item red large"></div> 
    <div class="item green large"></div> 
    <div class="item orange large"></div> 
    <div class="item red large"></div> 
    <div class="item green large"></div> 
    <div class="item orange small"></div> 

</div> 

---

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

Is it possible to use flexbox/CSS to create a masonry layout?

Answer 2

Если бы я тебя, я хотел бы попробовать сделать это в другом way.Try взглянуть на вашу идею как 4 колонки (дивы) с «дисплеем-инлайн: блок» свойство each.Then внутри Ваши divs размещают другие divs со свойствами, которые вы хотите. Я вижу только это решение с чистым CSS и без дополнительных плагинов или фреймворков. Не забудьте добавить свойство «margin-bottom» для каждого из вашего «блока» внутри столбца.

Answer 3

Вы уже установили высоту для контейнера 2 больше, чем емкость 1 попробуйте использовать это:

.all { 
     text-align: center; 
    } 
    .a { 
     width: 200px; 
     min-height: 100px; 
     background: red; 
     margin: 20px; 
     display: inline-block; 
    } 
    .b { 
     height: 100px; 
    }