4

私は3つのdivを持っています

<div id="d1" style="float:left;width:150px;">
asdqwe
</div>
<div id="d2" style="float:left;">
qwerty
</div>
<div id="d3" style="float:right;width:150px;">
poilkj
</div>

ここで、d2 div 幅を動的に設定し、jquery を使用して画面解像度ごとに最大利用可能に設定したいと考えています。

試してみjQuery('#d2').width()ましたが、実際には幅を保持することしかできません。

左から 150px の d1、右から 150px の d3、および d2 の残りの幅のような Web ページ画面を表示したいと考えています。

どうしたらいいのか教えてください????

4

7 に答える 7

1 
entireScreenWidth = screen.width
d1Width = $("#d1").width()
d2Width = $("#d2").width()

$("#d3").width(entireScreenWidth-d1Width-d2Width)
于 2013-09-19T07:14:18.347 に答える
0

あなたはこれを試してみるべきです

$( document ).ready( function(){
setMaxWidth();
$( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

function setMaxWidth() {
$( "#d2" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});
于 2013-09-19T07:13:58.390 に答える
0

中央の div をフロートせずにソース内のその前にフローティング div を配置する場合、ブラウザーはこれを単独で処理できるため、Javascript は必要ありません。

<div id="d1" style="float:left;width:150px;">
asdqwe
</div>
<div id="d3" style="float:right;width:150px;">
poilkj
</div>
<div id="d2">
qwerty
</div>

私たちに伝えていない要件がない限り、これで十分です。

于 2013-09-19T07:14:03.830 に答える
0 
Math.max.apply(Math, $('#d2').map(function(){ return $(this).width(); }).get());

提案ごとに、私はそれを分解します：

$('#d2').map(function(){
   return $(this).width();
}).get();

Math.max は N 個の引数を取るため、Math.max(200, 300, 250, 100, 400) のように呼び出す必要があります。これは、Math.max.apply ピースが実現するものです。

于 2013-09-19T07:12:34.980 に答える