如何在不使用父div的情况下垂直放置布局div

我试图摆脱使用表格，我现在试图创建一个简单的基于div的布局 - 标题，内容，100％宽度的页脚div并且没有母公司但我有一个小问题。如果我在那里插入任何内容，我的内容和页脚div将重叠标题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; 
}

来源

2013-10-09 meks

你想这是流体或固定布局？设置一些“职位”可能会有所帮助。有几十个仅限CSS的布局帮助器网站......我相信您可以找到适合您需求的网站。 – DevlshOne

我希望它固定。因此所有的布局div都以垂直顺序依次排列topmenu，页眉，内容，页脚 – meks

我应该为布局div分配什么位置的内容以及内部的内容？ – meks

只是删除所有position:absolute从CSS规则和你做。

来源

2013-10-09 04:14:03 anupam

等待让我试试 – meks

是的，你是正确的 – meks

非常感谢你！ – meks

这里是您的解决方案。您无需指定width=100未定义宽度，默认情况下为100％。只需指定所需的宽度为body，其他每个容器都将是该宽度。 float: left;将防止容器垂直堆放。它们实际上将水平堆叠。

而不是使用许多Ids代替Div，您可以通过以下方式简化带有HTML5标签的标签。

<!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-09 03:38:01 MCSharp

感谢您的建议，但我需要这些div大于930像素并占据屏幕的100％。这就是问题 – meks

您是否阅读过关于宽度底部的编辑？ – MCSharp

是的，我删除了100％的宽度属性，他们正在考虑他们的内容的大小 – meks

你正在使用绝对和相对定位很多他们让你的布局看起来不好，元素重叠。

而且你不需要定义保证金和所有其他性质多次

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

2013-10-09 04:23:00 Rex

那么你有什么建议？ – meks

@meks通过使用css-reset开始，快速浏览CSS属性。主要是练习。我在回答中给出了一个css-reset链接 – Rex

@meks也检查垂直布局 – Rex

如何在不使用父div的情况下垂直放置布局div

回答

相关问题