Question

出于某种原因，我的页脚会使两个框重叠，文本位于其上方的不同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>

Answer 1

你漂浮了两个柱子。

你需要清除它们。

更改

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

in

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

或者，以更加优雅的方式使用＆＃34; clearfix＆＃34;：

将此添加到您的css

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

和您的父级的class clearfix，如下所示：

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

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

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

Answer 2

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

<强>解释

clear:both;表示左侧或右侧不允许浮动元素，因此不允许其他div与其重叠。

Answer 3

尝试将以下内容添加到页脚规则。

display：inline-block;

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

Answer 4

尝试在div之后使用style =“clear：both”，并留下id示例。我想这会解决你的问题。

页脚div与其他两个div重叠

4 个答案: