重新定位相對差距調整大小

Question

我想要佈置與許多相對定位的Div的行。 它們都是具有不同高度的內嵌塊元素。 你可以在這裏看到它在我codepen：

codepen

如何避免上午十時正之間的空白。 1（紅色）和Nr。 5（黑色）如果窗口變小並且DIVS在第二行重新排列？ 因此，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

你必須把在拖動類的代碼

body 
    { 
    margin:0px; 
    padding:0px; 
    } 
    .drag 
    { 
     display: inline-block; 
     float:left; 
     padding:0px; 
     margin:0px; 
    } 

讓div互相浮動非常有用...