jquery - 页面布局问题/设计问题

Question

我有一个要显示的页面

• 沿屏幕顶部边框的菜单栏，占整个宽度:
• 与页面中间和屏幕左边框对齐的图像，
• 中间有一个 div 框(文本居中对齐)，屏幕右边框有另一个图像(与第一个尺寸相同)- 这称为 mainBlock
• 一 strip 有 Logo 的白色 strip 位于屏幕底部边框的中央。

如何设置 div 和位置才能使其正常工作？如果我使用绝对定位，那么在调整页面大小时它会搞砸。我现在的代码是

<div style="position:absolute;top:0px;left:0px;width:100%;height:45px;background-color:black;color:white;text-align:center;vertical-align:middle;display:block;line-height:45px;">
    <font size="+2">About | Sign Up | Sign In</font>
</div>

<div style="position:absolute;top:80px;left:10px;width:4em;opacity:0.8;filter:alpha(opacity=80);background-color:white">
    <img src="img/bk.png" id="bkArrow">
</div>

<div id="mainBlock" style="position:absolute;top:80px;left:35px;opacity:0.8;filter:alpha(opacity=80);background-color:white;border-style:solid;border-width:2px;border-radius:4px;vertical-align:middle;border-color:green;">
    Main area for my content
</div>

<div style="position:absolute;top:80px;right:10px;width:4em;opacity:0.8;filter:alpha(opacity=80);background-color:white" >
    <img src="img/fw.png" id="fwArrow">
</div>

<div style="position:absolute;left:0px;bottom:0px;background-color:white;width:100%;" align=center>
    <img src="img/logo.png">
</div>

Answer 1

当然你的问题不是很清楚，但从我的结论来看，你必须使用一个包装器来绑定(bind)所有这些div，你可以尝试以下(也可以调整窗口大小):

<div id="wrapper" style="width:100%; height:100%;" >
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 15%;
background-color: black; color: white; text-align: center; vertical-align: middle; display: block; line-height: 45px;">
<font size="+2">About | Sign Up | Sign In</font>
</div>

<div style="position: absolute; top: 15%; left: 0px; width: 10%; opacity: 0.8; filter: alpha(opacity=80); background-color: #FFFFFF; height: 75%;">
<img src="img/bk.png" id="bkArrow">
</div>

<div id="mainBlock" style="position:absolute;top:15%;left:10%; height:75%; width:80%;opacity:0.8;filter:alpha(opacity=80);background-color:white;border-style:inset;border-width:2px;border-radius:4px;vertical-align:middle;border-color:green;">
Main area for my content</div>
<div style="position: absolute; top: 15%; right: 0px; width: 10%; opacity: 0.8; filter: alpha(opacity=80); background-color: #FFFFFF; height: 75%;" >
<img src="img/fw.png" id="fwArrow"></div>

<div id="footer" style="position: absolute; left: 0px; bottom: 0px; background-color: white; width: 100%; height: 10%;" align=center>
<img src="img/logo.png"></div>
</div>