How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

Question

So here's my current dilemma, what I'm trying to achieve here is something like this:

Just please ignore all the contents of each boxes/divs. notice that the 6 boxes floats with each other perfectly and evenly. That's what I'm trying to replicate.

So I have my own codes:

HTML

<div class="tentofifteen">
    <section class="grid-superloop-ten" id="wired-superloop">
    </section>

    <section class="grid-superloop-eleven" id="wired-superloop">
    </section>

    <section class="grid-superloop-twelve" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen" id="wired-superloop">
    </section>
</div>

CSS

    <style>


.tentofifteen {
    height: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#wired-superloop {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.tentofifteen:after {
    content:"";
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}





        </style>

Now, the result of this is not really successful. Which I have no idea how to figure out to float the last two divs.

here's the screen shot.

Any ideas what's wrong with the code? Could you please help to solve the issue?

Answer 1

尝试砌筑https://jsfiddle.net/2Lzo9vfc/66/

<强> JS

$('.tentofifteen').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 1
});

<强> HTML

<div class="tentofifteen">
    <section class="grid-superloop-ten grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-eleven grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-twelve grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen grid-item" id="wired-superloop">
    </section>
</div>