html div 位置和显示 [英] html div positions and display

问题描述

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

I am trying to design a web site, using 5 different divs as shown above.

• A"是标题，(背景图片，重复 x)
• "B" 是导航栏 1(div 内的图像，高度应为 100%)
• C"是内容面板(div，应该是页面滚动过程中唯一移动的部分)
• "D" 是页脚( div，应该始终在 "C" 上方)
• "e" 是菜单(div，应该始终保持在同一位置)

• "A" is the header, ( background-image, repeat x)
• "B" is the navbar 1 ( image inside a div, should have 100% height )
• "C" is the content panel ( div, should be the only part which moves during page scroll)
• "D" is the footer ( div, which should be always above the "C" )
• "e" is the menu ( div, which should always stay at same position)

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

Can you help me about this, I tried but failed, and another issue is "B","C","D" and "e" should be in the center always when resizing the window or with different screen resolutions "x point" and y "point" should resize when resizing the window.

x 点:左墙到B"之间
y点:C和右墙之间

x point : between left wall to "B"
y point : between C and right wall

推荐答案

你会想要使用负边距和浮动:left &对

You will want to use negative margins and float: left & right

因此创建一个名为container"的 div 使其成为最小显示的宽度.

so create a div called "container" make it the width of your minimum display.

然后做这样的事情

我创建了这个页面，所以你可以实时看到它，它是一个小版本，但你可以根据需要调整宽度和高度.

I have created this page so you can see it live, its a small version but you can adjust the widths and heights as you need.

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 所在的位置.
我还没有测试过这个，但它应该非常接近.
希望这有帮助

Adjust the widths and heights as needed
I added the background colors so you can see where the divs are landing.
I haven't tested this but it should be pretty darn close.
Hope this helps

这篇关于html div 位置和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！