html div位置和显示

Hi,

我正在尝试设计一个网站，使用 5 个不同的 div，如上所示。

• "A" 是标题，（背景图像，重复 x）
• "B" 是导航栏 1（div 内的图像，应具有 100% 高度）
• "C" 是内容面板（ div，应该是页面滚动期间唯一移动的部分）
• "D" 是页脚（ div，应始终位于“C”上方）
• "e" 是菜单（div，应始终保持在同一位置）

你能帮我解决这个问题吗？我尝试过但失败了，另一个问题是在调整窗口大小或使用不同的屏幕分辨率时，“B”、“C”、“D”和“e”应该始终位于中心”x point“和你”point" 应该在调整窗口大小时调整大小。

x point：左墙到“B”之间
y point：C 与右墙之间

您将需要使用负边距和浮动：左和右

因此，创建一个名为“container”的 div，使其成为最小显示的宽度。

然后做这样的事情

我创建了此页面，以便您可以实时查看它，它是一个小版本，但您可以根据需要调整宽度和高度。

http://luistovar.com/divs.html http://luistovar.com/divs.html

<center>
<div id="container">

    <div id="a"><font color="white">A</font>
        <div id="e"><font color="white">E</font></div><!-- div e end -->
    </div><!-- div a end -->

    <div id="b"><font color="white">B</font></div><!-- div b end -->

    <div id="c"><font color="white">C</font></div><!-- div c end -->

    <div style="clear:right"></div><!-- clear end -->

    <div id="d"><font color="white">D</font></div><!-- div d end -->

</div><!-- container end-->
</center>

现在开始你的CSS

#container {
    width:400px;
}

#a {
    width: 400px;
    height:60px;
    background-color:#333333;
}

#b {
    width:80px;
    height:100%;
    margin:-30px 0px 0px 40px;
    float:left;
    background-color:#666666;
}

#c {
    width: 250px;
    height:400px;
    margin:10px 20px 0px 0px;
    float:right;
    background-color:#999999;
}

#d {
    width: 250px;
    height:40px;
    margin:10px 20px 0px 0px;
    float:right;
    background-color:#ff0220;
}

#e {
    width: 160px;
    height:30px;
    margin:10px 20px 0px 0px;
    float:right;
    background-color:#ff0220;
}

根据需要调整宽度和高度
我添加了背景颜色，以便您可以看到 div 的着陆位置。
我还没有测试过这个，但它应该非常接近。
希望这可以帮助