0

我正在尝试摆脱使用表格，现在正在尝试创建一个简单的基于 div 的布局 - 页眉、内容、页脚 div，宽度为 100%，没有父 div。但我有一个小问题。如果我在其中插入任何内容，我的内容和页脚 div 会与页眉 div 重叠。它们出现在标题 div 的中间。如果它们是空的，它们会正常显示。但是，当我在其中插入标题图像时，问题就开始了。

我试图改变浮动和显示属性，但它给了我奇怪的输出。谁能帮我一个接一个地垂直放置它们？

这是HTML代码：

<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>

这里是css样式：

div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}

 div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
 }

  div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
  }

  div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}

 .innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
 }
4

3 回答 3

1

您经常使用绝对定位和相对定位，它们使您的布局看起来很糟糕，并且元素重叠。

此外，您不需要多次定义边距和所有其他属性

html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}

水平布局

CSS-重置

垂直布局

于 2013-10-09T04:23:00.933 回答
0

这是为您提供的解决方案。您无需指定width=100不定义宽度，默认为 100%。只需指定您想要的宽度，body并且每个其他容器都将是该宽度。float: left;将防止容器垂直堆叠。它们实际上会水平堆叠。

您可以通过以下方式使用标签简化标签，而不是使用 many Idsfor 。DivHTML5

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <style type="text/css">
            body {
                margin: 0 auto;
            }

            menu {
                height: 20px;
                background-color: #800000;
                text-align: center;
                margin: 0px;
            }

            header {
                background-color: #0FF;
                text-align: center;
                margin: 0px;
            }

            article {
                margin: 0px;
                text-align: center;
                background-color: #0CC;
            }

            footer {
                margin: 0px;
                text-align: center;
                background-color: #CF3;
            }

            section {
                height: 100px;
                margin: auto;
                background-color: #C30;
            }
        </style>
    </head>
    <body>

        <menu>topmenu</menu>
        <header>Header
        <article>
            <img src="http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif" />
        </article>
        </header>
        <section>content</section>
        <footer>footer </footer>

    </body>
    </html>
于 2013-10-09T03:38:01.247 回答
0

只需position:absolute从CSS规则中删除所有内容即可。

于 2013-10-09T04:14:03.970 回答