阻止DIV与其他DIV重叠（CSS）

我只需要3个DIV在彼此之上。这不是很多的代码，当我没有任何内容的时候，它可以正确堆叠。不知道我在做什么错，但是这里有代码。我想在中间内容DIV下面再添加一个DIV。这用于底部信息栏。我知道z-index更多地用于图层，并不会对我的知识有利。阻止DIV与其他DIV重叠（CSS）

这里是我的HTML代码：

<html> 
<head> 
    <title>Mt. Rose, City of Refuge MEdia</title> 
    <link rel="stylesheet" 
      href="storage/mainsite/styles/default_button.css" type="text/css"> 
    <link rel="stylesheet" href="storage/mainsite/styles/default_font.css" 
      type="text/css"> 
    <link rel="stylesheet" href="storage/mainsite/styles/default_div.css" 
      type="text/css"> 
</head> 
<body style="background-color: rgb(255, 255, 255); text-align: center;"> 
<br> 

<div class="maindefault" style="display: block;"><!--Banner insert --> 
    <img src="storage/mainsite/bannerfinalfeathered.png" alt=""><a 
     class="button" 
     href="http://output93.rssinclude.com/output?type=iframe&amp;id=456111&amp;hash=c334e7f73918b535f66271d019d52a83" 
     title="Home" target="content"><span>Home</span></a> <a class="button" 
                   title="About Us" 
                   href="http://mtrosecogic.org/mtrose1/about"><span>About</span></a> 
    <a class="button" href="index.html" title="Mt. Rose Public Calendar"><span>Calendar</span></a> 
    <a class="button" href="/flash_newpage.html" title="Live Video Feed"><span>Live 
Feed</span></a> <a class="button" target="content" href="access.html" 
        title="Restricted"><span>Access</span></a> 
    <a class="button" href="index.html" 
     title="Mt. Rose Virtual Learning Environment"><span>Education</span></a> 
    <a class="button" href="/flash_newpage.html" 
     title="City of Refuge Online Webstore!"><span>Store</span></a> 
    <a class="button" target="content" href="/interactive.html" 
     title="Interactive Media Gallery"><span><font face="Juice">Interactive</font></span></a> 
</div> 
<br> 

<div class="maindefault"> 
    <iframe 
     style="margin-top: 0px; margin-bottom: 0px; text-align: center; width: 416px; height: 800px; float: left;" 
     float="" marginheight="0" src="flash_newpage.html" id="flashframe" 
     name="flashframe" marginwidth="0" frameborder="0" scrolling="no"></iframe> 
    <iframe 
     style="overflow: auto; margin-top: 6em; margin-bottom: 0px; height: 600px; width: 400px; float: right; text-align: center;" 
     id="content" marginheight="0" marginwidth="0" 
     src="http://output93.rssinclude.com/output?type=iframe&amp;id=456111&amp;hash=c334e7f73918b535f66271d019d52a83" 
     name="content" frameborder="0"></iframe> 
</div> 
</body> 
</html>

这里是我的DIV + CSS（这是一个链接样式表）：

.maindefault { 
    margin: 0px auto; 
    width: 817px; 
    font-family: "High Tower Text",Georgia,Serif; 
    display: inline-block; 
    text-align: center; 
}

而且，我使用KompoZer会8.3是否有帮助。 ThankYOU

编辑::我不熟悉JS提琴手，但链接是mtrosemedia.tk。当我在最后的</div>下添加另一个.maindefault div时，我的新DIV会紧贴第二个DIV的顶部。我需要新的DIV紧贴第二个DIV的底部。然后，当我添加内容时，它会显示在我的Flash和我的RSS提要上。我还想改进Feed列表，但我会提出另一个问题。

来源

2012-04-19 newburns

这将有助于如果您发布链接到工作网站或jsFiddle示例。 – 2012-04-19 20:15:57

当你把内容放进去时，你是说divs重叠吗？

尝试将.maindefault左移。添加内容时，下一个div应该对齐好，并紧贴上面的顶部。

来源

2012-04-19 01:55:02 Tama198

编辑::我不熟悉JS提琴手，但链接是mtrosemedia.tk。发生什么事的是，当我在最后添加另一个.maindefault div时，我的新DIV紧挨着第二个DIV的顶部。我需要新的DIV紧贴第二个DIV的底部。然后，当我添加内容时，它会显示在我的Flash和我的RSS提要上。我还想改进Feed列表，但我会提出另一个问题。 – newburns 2012-04-21 12:58:12

阻止DIV与其他DIV重叠（CSS）

回答

相关问题