0

別のDIVが(PHP経由で)内部にロードされているときに、DIVコンテナのJqueryで幅を変更するにはどうすればよいですか?

これは私のHTMLコードです

<div id="container">
    <div class="item"> Content 1 </div>
</div>

ここで、各ページの「コンテナ」を動的に設定する必要があります。別のページにこの HTML コードが含まれている可能性があります

<div id="container">
     <div class="item"> Content 1 </div>
     <div class="item"> Content 2 </div>
     <div class="item"> Content 3 </div>
</div>

「アイテム」には float:left があります。すべての「アイテム」を一列に並べたい。「アイテム」が内部にロードされたときに「コンテナ」の幅を動的に変更するにはどうすればよいですか?

スクロールバー Jquery プラグインを使用して div をスクロールしています。

助けてください！

4

3 に答える 3

1

次のように、子の幅を計算し、合計をコンテナーに適用できます。

var contentWidth = 0;

$('#container .item').each( function() {
    // outerWidth(true) includes margins
    contentWidth += $(this).outerWidth(true);
});

$('#container').width( contentWidth );

デモ: http://jsfiddle.net/jtbowden/SQASY/

または、いくつかの基本的な CSS を使用して、JavaScript をまったく使用しないようにすることもできます。

デモ: http://jsfiddle.net/jtbowden/YBKxn/1/

于 2012-04-09T22:43:16.057 に答える
1

このようなものが必要ですか？

$(document).ready(function(){
    var youtWidth = 100;
    $('#container').width($('#container .item').length * yourWidth);
})

これにより、#container 内の要素がカウントされ、#container の幅が要素数の倍数に設定されます。この例では、要素ごとに 100px を保持します。

ファビオ

于 2012-04-09T22:38:47.743 に答える
1

アイテムの幅が異なる場合は、いつでも次のことができます。

var totalWidth = 0;
$('#container').children('.item').each(function(){
   totalWidth += $(this).outerWidth();
});

$('#container').width(totalWidth);
于 2012-04-09T22:43:47.893 に答える