Question

我有一个我想用

显示的页面

沿着屏幕顶部边框的菜单栏，整个宽度：
与页面中间和屏幕左边缘对齐的图像
中间的div框（中间对齐的文本）和屏幕右边框的另一个图像（与第一个相同的尺寸） - 这称为mainBlock
一个白色的带子，中间是徽标，沿着屏幕的下边缘。

如何设置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

当然你的问题不是很清楚，但是根据我的结论，你必须使用一个包装来绑定所有这些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>

页面布局问题/设计问题

1 个答案: