确定动态CSS3多列DIV宽度固定列宽的宽度

Question

我有一个DIV装满动态文本的容器.文本的长度可以不同.所述DIV容器具有一固定的高度,但没有宽度.

文本格式为CSS3多列文本宽度固定columns-width.

结果是n宽度为的列column-width.现在我想知道无论有多少列有或如何计算出width的DIV.

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();

除了Firefox之外,所有浏览器都返回而column-width不是REAL 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的体验有限:)

(应该归功于它:从如何在Javascript中获取CSS3多列计数的想法改编.)

Answer 2

这对我有用。http://jsfiddle.net/peduarte/LRWL8/

你把你的js包裹起来了吗$(document).ready()？