javascript - 确定动态 CSS3 多列 DIV 宽度的宽度 fixed column-width

Question

我有一个充满动态文本的 DIV 容器。文本的长度可以不同。 DIV 容器具有固定高度但没有宽度。

文本被格式化为 CSS3 多列文本宽度固定 columns-width。

结果是 n 列，宽度为 column-width。现在我想知道有多少列，或者 DIV 的计算 width 是怎样的。

CSS 代码:

.columnize{
    float: left;
    position: relative;
    width: 840px;
    overflow: hidden;
}
.columnize div{
    -moz-column-width: 259px;
    -webkit-column-width: 259px;
    -moz-column-gap: 16px;
    -webkit-column-gap: 16px;
    height: 560px;
}

HTML 代码:

<div id="columnWrapper class="columnize">
    <div id="content">
    ... content goes here ...
    </div>
</div>

我试着像这样用 JQuery 获取宽度:

$('#content').width();
$('#content').innerWidth();

两者都返回 column-width，而不是除 Firefox 之外的所有浏览器中的真实 width。

关于如何获取列布局的宽度有什么想法吗？

Answer 1

我在尝试使用 css3 列作为页面对文章进行水平分页时遇到了同样的问题。这是我作为 jQuery 插件的解决方案:

http://jsfiddle.net/rkarbowski/Sfyyy/

思路是这样的:你插入一个空白 <span>在您的专栏内容末尾标记并使用 .position()捕获它的left相对于父容器的位置，并添加一个 -webkit-column-width (因为 .position() 只告诉您到 left 的 <span> 坐标的距离)。

这里有一个我不明白的小怪癖。要获得正确的宽度，您还必须减去一个 -webkit-column-gap。 .在我看来，.position().left之间的距离并且容器的边缘应该只是最后一列的宽度，-webkit-column-width .谁能解释一下这个？我只是数学不好吗？

如果插件代码草率，请见谅；我对 jQuery 的经验有限:)

(归功于它应得的地方:改编自 How to Get CSS3 Multi-Column Count in Javascript 的想法。)