相対ディビジョンの位置を変更するサイズ変更

Question

相対配置された多数のディビジョンを持つ行をレイアウトしようとしています。 高さの異なるすべてのインラインブロック要素です。 あなたは私のcodepenにここでそれを見ることができます：

codepen

どのように私はNrの間の空白を回避することができます。 1（赤）とNr。ウィンドウが小さくなりDIVSが2番目の行に再配置された場合は5（黒）ですか？ Nr。 5はNr.1の直下にある？

これはCSSで可能ですか？

ありがとうございました！

---

HTML

<div class="drag" id="item_1">1</div> 
<div class="drag" id="item_2">2</div> 
<div class="drag" id="item_3">3</div> 
<div class="drag" id="item_4">4</div> 
<div class="drag" id="item_5">5</div> 

---

CSS

.drag { 
    position: relative; 
    display: inline-block; 
} 

#item_1 { 
    background-color: red; 
    width: 300px; 
    height: 300px; 
} 

#item_2 { 
    background-color: blue; 
    width: 300px; 
    height: 400px; 
} 

#item_3 { 
    background-color: green; 
    width: 200px; 
    height: 500px; 
} 

#item_4 { 
    background-color: yellow; 
    width: 300px; 
    height: 300px; 
} 

#item_5 { 
    background-color: black; 
    width: 300px; 
    height: 300px; 
} 

Answer 1

あなたはドラッグのクラスでこのコード

012を配置する必要があります

divをお互いに浮かべていると、非常に便利です...