Relative Divisionen neu positionieren Größe ändern

Question

Ich versuche eine Reihe mit vielen relativ positionierten Divs zu erstellen. Sie sind alle Inline-Blockelemente mit unterschiedlichen Höhen. Sie können es hier in meinem codepen sehen:

codepen

Wie kann ich den Leerraum zwischen Nr vermeiden. 1 (rot) und Nr. 5 (schwarz) wenn das Fenster kleiner wird und die DIVS in der zweiten Reihe neu angeordnet werden? Also diese Nr. 5 Stöcke direkt unter Nr.1?

Ist dies mit CSS möglich?

Vielen Dank für jede Hilfe!

---

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

Sie haben diesen Code in das Drag-Klasse setzen

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

floating die divs zu einander ist sehr nützlich ...