CSS Inline Display Block: Removing Space

Question

I have a container with a lot of divs displayed by an inline block. But when one of these divs is higher than the others, all divs on the same line have a space at the top.

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

Problem .

This is what I am trying to achieve.

I do not know how to do that.

Answer 1

It is not possible to accomplish what you portrayed only in HTML / CSS, providing any flexibility or ease of reproduction, although there is a neat Javascript library called Packery that does exactly what you want.

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.

flexbox/CSS ?

Answer 2

, -. 4 (divs) display-inline: block. divs divs . CSS . "margin-bottom" "" .

Answer 3

You have already set the height for container 2 more than container 1 try using this:

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