html div位置和显示

Question

您好，

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

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

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

x点：左墙与“B”之间 y point ：在C和右墙之间

Answer 1

你会想要使用负边距和浮动：左和右;右

所以创建一个名为“容器”的div，使其成为最小显示的宽度。

然后做这样的事情

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

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降落的位置 我没有对此进行测试，但它应该非常接近 希望这有帮助

Answer 2

我会说详细here的布局可能或多或少都是你所追求的。你想看看我认为你的“e”div的绝对定位，这将是一个棘手的问题。并且“B”可能必须被z索引以显示在“A”的顶部。我只是通过链接中提到的2列布局来实现它，然后在“E”中加上“B”，稍后再加上“B”。良好的液体布局很棘手，所以我不会在这个上重新发明轮子。