javascript - 如何确定实际显示了多少 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.