상대 div 위치 변경 위치 변경

Question

많은 상대적으로 위치 지정된 div가있는 행을 배치하려고합니다. 높이가 다른 모든 인라인 블록 요소입니다. 내 codepen에 여기를 볼 수 있습니다

codepen

가 어떻게 수 (Nr) 사이의 공백을 피할 수 있습니다. 1 (적색) 및 Nr. 창문이 작아지고 DIVS가 두 번째 줄에 재 배열되면 5 (검은 색)? Nr. Nr.1 바로 아래에 5 개가 붙어 있습니까?

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를 서로 띄우면 매우 유용합니다 ...