删除div之间的垂直间隙并按顺序

Question

现在是这样的：

我想这样：

我的css：

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

JSFIDDLE

这是example page

Answer 1

这是一个简单的实现，只需使用display：flex on main div并使两列div包装内部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;
}

<强>结果