9

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

列レイアウトの幅を取得する方法はありますか？

4

4 に答える 4

7

css3列をページとして使用して記事を水平にページ分割しようとして同じ問題に遭遇しました。jQueryプラグインとしての私のソリューションは次のとおりです。

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

アイデアは次のとおりです<span>。列のコンテンツの最後に空白のタグを挿入し、 を使用して親コンテナに対する相対的な位置.position()を取得し、left1 つ追加します-webkit-column-width(の座標.position()までの距離のみを示すため)。left<span>

ここで、私には理解できないちょっとした癖があります。正しい幅を取得するには、1 を引く必要もあります-webkit-column-gap。私の考えで.position().leftは、コンテナの と の端の間の距離は、最後の列の幅-webkit-column-width. 誰もこれを説明できますか？私は数学が苦手なだけですか？

プラグイン コードが雑で申し訳ありません。私のjQueryの経験は限られています:)

(それが当然であるクレジット: How to Get CSS3 Multi-Column Count in Javascriptから適応されたアイデア。)

于 2012-01-08T19:27:21.770 に答える
0

これは私にとってはうまくいきます。http://jsfiddle.net/peduarte/LRWL8/

あなたのjsをラップしています$(document).ready()か？

于 2011-12-02T10:25:09.807 に答える
0

構文は次のとおりです。

var div = document.getElementById(columnWrapper);               
var width = div.css("width"),
var height = div.css("height");
于 2011-12-02T10:25:48.027 に答える