스크린 샷에 표시된대로 div 배치가 필요합니다.

Question

크롬 확장 프로그램을 작업 중입니다. n 개의 div 블록이 있습니다. div 블록의 n 개의 번호는 내가 방문 할 URL에 따라 다릅니다. 따라서 일부 페이지에서는 보이는 블록이 1,2,3,4,5 일 수도 있지만 다른 1,5 또는 1,5 일 수도 있습니다. 따라서 내 div's이 공백을 차지해야하며 공백을 남기지 않아야합니다.

이 내가 (또한 jsfiddle에) 시도했다, 그러나 문제는 붉은 색 아래의 빈 공간 :

출력 나는이 필요합니다.

div { 
 
    float: left; 
 
    width: 200px; 
 
} 
 
.One { 
 
    background-color: Red; 
 
    height: 200px; 
 
} 
 
.Two { 
 
    background-color: Green; 
 
    height: 400px; 
 
} 
 
.Three { 
 
    background-color: Blue; 
 
    height: 500px; 
 
} 
 
.Four { 
 
    background-color: Orange; 
 
    height: 700px; 
 
} 
 
.Five { 
 
    background-color: Yellow; 
 
    height: 200px; 
 
} 
 
.Six { 
 
    background-color: Pink; 
 
    height: 400px; 
 
} 
 
.Seven { 
 
    background-color: Grey; 
 
    height: 600px; 
 
}

<div class="One"> 
 
</div> 
 
<div class="Two"> 
 
</div> 
 
<div class="Three"> 
 
</div> 
 
<div class="Four"> 
 
</div> 
 
<div class="Five"> 
 
</div> 
 
<div class="Six"> 
 
</div> 
 
<div class="Seven"> 
 
</div>

Answer 1

HTML

<article> 
    <section> 
    <p class="sect1">1</p> 
    </section> 
    <section> 
    <p class="sect2">2</p> 
    </section> 
    <section> 
    <p class="sect3">3</p> 
    </section> 
    <section> 
    <p class="sect4">4</p> 
    </section> 
    <section> 
    <p class="sect5">5</p> 
    </section> 
    <section> 
    <p class="sect6">6</p> 
    </section> 
    <section> 
    <p class="sect7">7</p> 
    </section> 
    <section> 
    <p class="sect8">8</p> 
    </section> 
    <section> 
    <p class="sect9">9</p> 
    </section> 
    <section> 
    <p class="sect10">10</p> 
    </section> 
</article> 

CSS

*, *:before, *:after {box-sizing: border-box !important;} 

article { 
-moz-column-width: 10em; 
-webkit-column-width: 10em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em; 

} 

section { 
display: inline-block; 
margin: 0.25rem; 
padding: 1rem; 
width: 100%; 
background: #efefef; 
} 

p { 
min-width: 200px; 
margin: 1rem 0; 
} 

.sect1{ min-height: 100px; } 
.sect2{ min-height: 200px; } 
.sect3{ min-height: 300px; } 
.sect4{ min-height: 300px; } 
.sect5{ min-height: 500px; } 
.sect6{ min-height: 600px; } 
.sect7{ min-height: 200px; } 
.sect8{ min-height: 400px; } 
.sect9{ min-height: 400px; } 
.sect10{ min-height: 400px; } 

다음

링크가있다 :,https://jsfiddle.net/JPratik2712/huLkhpux/