CSS에서 열 개수를 사용하여 X 열을 설정할 수 없습니다.

Question

CSS에서 열을 사용하는 데 문제가 있습니다. column-count: 6;을 설정하고 싶지만 5 개의 열만 나타납니다. 그것은 < = 5 값을 위해 잘 작동하는 것 같지만 뭔가를 높게 설정하려고하면 이상한 결과가 발생합니다. 열 개수가 일치하지 않습니다. 여기

.columns { 
 
    column-count: 6; 
 
} 
 
.columns__item { 
 
    display: inline-block; 
 
    background: #fff; 
 
    width: 100%; 
 
    padding: 5px; 
 
    margin-bottom: 10px; 
 
}

<ul class="columns"> 
 
    <li class="columns__item">Item 1</li> 
 
    <li class="columns__item">Item 2</li> 
 
    <li class="columns__item">Item 3</li> 
 
    <li class="columns__item">Item 4</li> 
 
    <li class="columns__item">Item 5</li> 
 
    <li class="columns__item">Item 6</li> 
 
    <li class="columns__item">Item 7</li> 
 
    <li class="columns__item">Item 8</li> 
 
    <li class="columns__item">Item 9</li> 
 
    <li class="columns__item">Item 10</li> 
 
    <li class="columns__item">Item 11</li> 
 
    <li class="columns__item">Item 12</li> 
 
    <li class="columns__item">Item 13</li> 
 
    <li class="columns__item">Item 14</li> 
 
</ul>

는 바이올린입니다 : https://jsfiddle.net/btqxd20r/1/. Chrome에서 테스트하고 있습니다.

Answer 1

은 그것은 여기에 .. 제대로 작동 업데이트 된 바이올린을하고, 확인 후 40 또는 50로 항목을 증가 그리고, display: inline-block; 문제가 될 수 https://jsfiddle.net/btqxd20r/2/

UPDATE : 픽셀

사용 float: left 세트 폭 항목을 행에 표시하고 기기에서 반응 형으로 표시하려는 경우 float div가 끝나면 clear:both CSS를 사용해야합니다.