页脚div与其他两个div重叠

出于某种原因，我的页脚不断将两个框与上面不同div中的文本重叠。我尝试了所有我能想到的方法，但是当窗口大小调整时，它会一直保持重叠。全屏幕它确实工作。请告诉我如何解决它。我有点失落......页脚div与其他两个div重叠

PS：我知道这个问题可能已经问了无数次，但我真的尝试了很多，我似乎无法弄清楚，我的道歉。

CSS：

*, html, body, div, ul, ol, li, h1, h2, h3, h4, 
h5, h6, pre, form, label, fieldset, input, p, th, td { 
    margin: 0; 
    padding: 0; 
} 

p{ 
    font: Arial; 
    size: 12; 
} 


a { 
    color: #2069b4; 
} 

a:hover { 
    color: #2a2e36; 
} 

div#wholeBody { 
    padding: 1% 3.3%; 
    width: 80%; 
    height: 105%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: eee; 
} 

div#mainContent { 
    border: 5px solid #ff6700; 
    padding: 1%; 
    width: 96%; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#twoColumns { 
    padding: 1%; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

div#examplesLeft { 
    border: 5px solid #0078ff; 
    padding: 1.1%; 
    width: 44%; 
    left: 0.5%; 
    float: left; 
    z-index: 1; 
    margin: auto; 

} 

div#contactRight { 
    border: 5px solid #ff001a; 
    padding: 1.1%; 
    width: 44%; 
    right: 2.6%; 
    float: right; 
    z-index: 1; 
    margin: auto; 
} 

div#footer { 
    text-align: center; 
    width: auto; 
    position: relative; 
    z-index: 1; 
}

HTML：

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <!-- title and icon --> 
     <title>#</title> 
     <link rel="shortcut icon" href="#"> 

     <!-- Stylesheet --> 
     <link rel="stylesheet" href="style.css"> 


     <!-- Optimize for mobile devices --> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    </head> 

    <body> 
     <div id="wholeBody"> 
      <div id="mainContent"> 
       <h1>Welcome!</h1><br /> 
       <p>testtesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttest 
       </p> 
      </div> 
      <div id="twoColumns"> 
       <div id="contactRight"> 
        <p> 
         <b class="big">Contact details</b><br /><br /> 
         company <br /> 
         name <br /> 
         Adress: <br /> 
         Postal code: <br /> 
         City: <br /> 
         Country: <br /> 
         Email: <a href="mailto:"></a> <br /> 
         Phone: <a href="tel:"></a> <br /> 
         Skype: <br /> 
         Twitter: <a href="#">#</a> <br /> 
         Iban code: <br /> 
         Chamber of Commerce number: 
        </p> 
       </div> 

       <div id="examplesLeft"> 
        <p><b class="big">Examples</b> of published concepts</p> 
       </div> 
       <div style="clear:float;"></div> 
       <div id="footer"> 
        <p>&copy; Copyright 2013/2014 </p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2014-09-24 Leafeeeh

你们两个柱子都浮起来了。

您需要清除它们。

变化

<div style="clear:float;"></div>

在

<div style="clear:both;"></div>

或者更分类器的方式使用 “clearfix”：

添加到您的CSS

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

和class clearfix to your pare nt，像这样：

 <div id="twoColumns" class="clearfix"> 
      <div id="contactRight"> 
      </div> 

      <div id="examplesLeft"> 
      </div> 
     </div> 

     <div id="footer"> 
     </div>

来源

2014-09-24 19:46:57 nicolast

谢谢！然而，这真的有帮助，但'优雅'的方式不适合我，它保持重叠。它在css文件中有不同的解释吗？无论如何，它在代码中可能看起来不那么优雅，但它起作用！ – Leafeeeh 2014-09-24 20:14:35

与清除方法你也必须改变你的标记（见我的答案）。顺便说一句，你可以接受我的答案：D – nicolast 2014-09-24 20:45:10

尝试添加以下页脚规则。

display：inline-block;

div#footer { 
    display: inline-block; 
    text-align: center; 
    width: auto; 
    position: relative; 
    z-index: 1; 
}

来源

2014-09-24 19:44:56 Rob

尝试使用风格= “明确：既” id为例子格后离开。我认为这会解决你的问题。

来源

2014-09-24 19:46:38 lgreg

将clear: both;添加到页脚元素。

说明

clear:both;意味着允许在左侧或右侧的没有漂浮元素，所以它不允许其他的div重叠它。

来源

2014-09-24 19:48:29 ran3000

这将有助于你解释为什么多一点。随机用户遇到你的答案时总是有帮助;） – 2014-09-24 19:55:34

好吧，你是对的。这意味着左侧或右侧都不允许浮动元素，所以它不允许其他div与其重叠。 – ran3000 2014-09-24 19:59:45

页脚div与其他两个div重叠

回答

相关问题