0

私は、列を人、行を間隔 (30 分) として持つ、スケジュールっぽいアプリケーションを作成しています。

背景パターンが 1 つ必要です。背景には、30 分ごとに点線の水平線と 1 時間ごとに直線が必要です。

テーブル全体の高さは固定ではありません。画面解像度の高さに依存するため、背景画像を使用することは不可能です。少なくとも私はそう思います。

高さと位置が固定されていないため、div を列の上に配置する必要があります。7X48のテーブルが必要ですが、問題は、セルの高さが固定されておらず、オーバーレイさえする可能性があるため、行を使用できないため、実際にはテーブルが必要ないことです。

列として 7 つの div のみで目標を達成できる方法はありますが、テーブルを使用せずに背景パターンを保持できますか?

それができれば、DOM を惜しまないと思います。なぜなら、私は 7 つしか必要としないのに、336 を超えるノードを作成しているからです。

編集：

jsfiddle.net/Qufzm - これは私の背景パターンの簡易版です。float:left を使用して列 div のみで同じ効果を達成し、テーブルを回避できるようにしたい

4

1 に答える 1

1

Masonry (jQuery プラグイン) が役立つ場合があります。

次のhtmlがあるとしましょう：

<div id="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>​

Javascript を使用して列の幅と高さを制御でき、他にも多くのオプションがあります。

JS コード:

$(function() {
    $('#container').masonry({
        // options
        itemSelector: '.item',
        columnWidth: 100,
        isAnimated: true
    });
});​

サンプルフィドル。石工サイトのデモをチェックしてください。

于 2012-10-21T15:45:01.810 に答える