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でテストしています。ピクセルで

使用float: leftセット幅：

Answer 1

それは...ここで更新フィドルhttps://jsfiddle.net/btqxd20r/2/

UPDATEがあり、display: inline-block;問題では40または50にアイテムを増やし、その後チェックし、それが正しく動作可能性があります行にアイテムを表示し、デバイスに対して反応させたい場合は、 float divの末尾にclear:both CSSを使用する必要があります。