如何確定實際顯示多少個CSS3列（與指定的列數）？

Question

我的是在我指定爲具有多個列的盒子的標籤列表：

#tags { 
    -webkit-columns: 140px 5; 
} 

結果：

這個列表的內容是動態生成的。

當我調整瀏覽器窗口的大小時，列數會崩潰。例如： -

使用jQuery/JS/CSS /等等，我怎麼能確定有多少列在任何給定時間顯示？

Answer 1

除非您指定了所有與列寬相關的屬性，否則瀏覽器將嘗試在內容區域（元素的左側和右側填充之間）填充整個列數。所以(contentWidth + columnGap)/(columnWidth + columnGap)向下舍入會給你結果。

請注意，右填充可能設置得太高以至於整列可以適合 - 您可能需要調整計算。

如果在列文本內有一個寬度爲100％的元素，還可以直接獲取列的大小。

Answer 2

你可以得到這樣的價值：

$('#tags').css('-webkit-column-count'); 

嘗試提醒這一點：

alert($('#tags').css('-webkit-column-count')); 

Answer 3

類似阿列克謝的答案，我想出了一個解決方案，使列數：

var $tags = $("#tags"), 
     column_width = $tags.children(':first').width(), 
     container_width = $tags.width(), 
     column_count = Math.floor(container_width/column_width); // in my case, sum of column gaps is less than the width of a column, so I can round down.