2

私のテンプレートでは、メインラッパーdivの左側にdivを固定しました。残りの部分では、ウィンドウのサイズを変更しても、別のdivボックスを完全に中央に配置します。

jqueryで現在のウィンドウサイズを取得しました：

<script type=text/javascript>
$(window).resize(function() {
       var my_window = $(window).width();
});
</script>

HTML：

<div id="wrapper">
<div id="rightbox"></div>
<div id="leftbox"> </div>
</div>

Css：

#wrapper{
position:absolute;
width:100%;
height:100%;
background:green;}

#leftbox{
position:fixed;
width:100px;
height:100%;
top:0;left:0;
background:red;}


#rightbox{
position:fixed;
width:400px;
height:100px;
bottom:100px;
left:50px;
background:blue;}

デモ： http： //jsfiddle.net/NpeRZ/

ここrightbox divで、任意の画面解像度で緑色の画面の中央に配置したいので、このために柔軟な幅が必要ですrightbox div。jqueryを使用してこれを取得し、rightboxを常に中央に設定する方法。同様に、jqueryのmy_window値に応じて、rightboxdivに異なるmargin-leftとmargin-rightを設定したいと思います。

for my-window 1024px :margin-left = 100px,
for my-window 768px  :margin-left = 80px.
for my-window 640px  :margin-left = 60px.
for my-window 480px  :margin-left = 40px.
for my-window 240px  :margin-left = 20px.
4

2 に答える 2

0

これを試して：

#rightbox{
position:fixed;
width:400px;
height:100px;
left: 100px;
right: 0px;
top: 0px;
margin: auto;
bottom:0px;
background:blue;
}

左側は、左側のフレームまたはdivのサイズになります。

于 2013-02-01T08:47:47.937 に答える
0

Jquery を使用する必要はありません。右側のボックスの css を次のように変更するだけです。

#rightbox{
position:fixed;
width:400px;
height:100px;
left:50%;
margin-left:-150px;    
top:50%;
margin-top:-50px;
background:blue;}

試してみただけで、完璧に動作します。

于 2013-02-01T08:49:14.590 に答える