gpt4 book ai didi

javascript - 使用jquery将div放置在窗口的空白部分中间

转载 作者:行者123 更新时间:2023-11-30 06:35:51 25 4
gpt4 key购买 nike

在我的模板中,我将 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 值,我想为 rightbox div 设置不同的 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.

最佳答案

试试这个:

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

左边是左边框架或 div 的大小。

关于javascript - 使用jquery将div放置在窗口的空白部分中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14642374/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com