remove vertical gaps between divs and put in a sequence

Question

It is now like this:

I want like this:

my css:

.maindiv{
    width:410px;
}
.innerdiv{
    display: inline-block;
    width: 200px;
    height: auto;
}

JSFIDDLE

this is an example page

You can use two main div side by side and have these inner div inside that — Sanjeev, Aug 13 '15 at 05:58
@Elyor short answer: avoid `whitespace` between `inline-block` elements — Ormoz, Aug 13 '15 at 05:58
(can't post as answer since it's marked as duplicate), you can use :nth-child `.innerdiv:nth-child(odd){ float: left; }` `.innerdiv:nth-child(even){ float: right; } ` [JSFIDDLE-DEMO](https://jsfiddle.net/021eqc92/5/) — Dyrandz Famador, Aug 13 '15 at 06:41

Sanjeev · Answer 1 · 2015-08-13T06:08:08.177

Here's an easy implementation ,just use display:flex on main div and make two columns div to wrap inner div

<div class="maindiv">
    <div class="col-1">
        <div class="innerdiv">
           <img style="width: 100%; height: 200px;"/>
        </div>
        <div class="innerdiv">
            <img style="width: 100%; height: 120px;"/>
         </div>      
         <div class="innerdiv">
             <img style="width: 100%; height: 220px;"/>
         </div>
     </div>
     <div class="col-1">
        <div class="innerdiv">
            <img style="width: 100%; height: 260px;"/>
         </div>
         <div class="innerdiv">
              <img style="width: 100%; height: 180px;"/>
         </div>
       </div>
</div>

css

.maindiv {
width: 410px;
display: flex;
}

Result

remove vertical gaps between divs and put in a sequence

1 Answers1