确定动态CSS3的宽度多列DIV宽度固定列宽 [英] Determine the Width of a dynamic CSS3 Multicolumn DIV width fixed column-width

问题描述

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

I have a DIV container filled with a dynamic text. The length of the text can be different. The DIV container has a fixed height but no width.

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

The Text is formatted as CSS3 Multicolumn Text width a fixed columns-width.

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

The result is n columns with the width of column-width. Now i want to know either how many columns are there or how is the computed width of the DIV.

CSS CODE：

.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获取宽度如下：

I tried to get the width with JQuery like this:

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

column-width ，而不是除Firefox以外的所有浏览器中的REAL width 。

both return the column-width, not the REAL width in all browsers except Firefox.

如何获取列布局的宽度？

Any ideas how to get the width of the column layout?

推荐答案

我遇到了同样的问题试图使用css3列作为页面这是我的解决方案作为一个jQuery插件：

I ran into the same problem trying to paginate an article horizontally using css3 columns as pages. Here's my solution as a jQuery plugin:

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

这里的想法：您插入一个空白< span> c> $ 标记在列内容的结尾处，并使用 .position（） >相对于父容器的位置，并添加一个 -webkit-column-width （因为 .position（）告诉您到< span> 的左坐标的距离。

Here's the idea: you insert a blank <span> tag at the end of your column content and use .position() to grab its left position relative to the parent container, and add one -webkit-column-width (because .position() only tells you the distance to the left coordinate of the <span>).

这里有一个小小的怪癖，我不明白。要获得正确的宽度，还必须减去一个 -webkit-column-gap 。在我看来， .position（）。left 和容器的边缘之间的距离应该只是最后一列的宽度， -webkit -column-width 。任何人都可以解释这一个吗？我只是在数学坏吗？

Here's a little quirk that I don't understand. To get the correct width, you also have to subtract one -webkit-column-gap. In my mind, the distance between .position().left and the edge of the container should only be the width of the final column, -webkit-column-width. Can anyone explain this one? Am I just bad at math?

对不起，如果插件代码马虎;我的jQuery的经验是有限的：）

Sorry if the plugin code is sloppy; my experience with jQuery is limited :)

（需要的信用：想法改编自如何在Javascript中获取CSS3多列计数）

(Credit where it's due: idea adapted from How to Get CSS3 Multi-Column Count in Javascript.)

这篇关于确定动态CSS3的宽度多列DIV宽度固定列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！