如何获取css3多列计数在Javascript中 [英] How to get css3 multi-column count in Javascript

问题描述

我们使用新的css3多栏布局属性来将我们的文字转换成报纸栏。每个列获得固定宽度，列数默认为auto，这意味着浏览器会确定有多少列。

我们如何获得如果我们查询csscolumn-count（或-moz-column-count），我们得到auto或者一个空白的结果。

解决方案

秘诀是在内容的末尾放一个小标记。您可以通过编程添加一个空白区域：

 < span id =mymarker>< / span& 
  

然后使用jquery $（＃mymarker）获取span并获取left属性。将该数除以列宽（根据列间距进行调整），并将告诉您此最后一个元素所在的列。Math.ceil（）对值，并且具有列计数。

We're using the new css3 multi-column layout properties to get our text into newspaper columns. Each column gets a fixed width, and the column-count defaults to "auto", which means that the browser decides how many columns there are.

How do we get the actual number of columns as an integer in Javascript?

If we query the css "column-count" (or -moz-column-count) we get either "auto" or a blank as a result.

解决方案

The secret is to put a small marker at the end of the content. You can programmatically add an empty span:

<span id="mymarker"></span>

then grab the span using a jquery $("#mymarker") and get the "left" property. Divide that number by the width of the columns (adjusted for column-gap), and that will tell you what column this last element is in. Math.ceil() on the value and you have the column count.

这篇关于如何获取css3多列计数在Javascript中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！