無法使用CSS中的列數設置X列

我在使用CSS中的列時遇到了一些問題。我想設置column-count: 6;，但它只能得到5列。它似乎工作正常值爲< = 5，但當我嘗試設置更高的東西時，它會產生奇怪的結果。列數不匹配。無法使用CSS中的列數設置X列

.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中測試它。

來源

2016-08-12 Astaz3l

這可能是display: inline-block;問題，提高您的商品，以40或50，然後檢查，它工作正常..這裏是更新的小提琴https://jsfiddle.net/btqxd20r/2/

UPDATE：以像素爲單位

使用float: left設置寬度在一行中顯示你的項目，如果你想讓它響應設備。請記住，你應該使用clear:both css結束浮動div後...

來源

2016-08-12 14:48:13

感謝您的回答。也許這不是我創建的最好例子。基本上我想要實現的是擁有像佈局一樣的Pinterest。問題是我有不同的元素高度。請看這裏更新的小提琴：https：//jsfiddle.net/btqxd20r/4/ 正如你可以看到項目是在兩列，但它應該在一列。添加'display：inline-block'正在解決這個問題。 '浮動：左'不是在這種情況下去的方式 – Astaz3l

你可以找到一些有用的鏈接來實現，就像這樣[鏈接]（http://cssdeck.com/labs/css-only-pinterest-style-列布局） –

無法使用CSS中的列數設置X列

回答

相關問題