如何纠正Div重叠？(How to correct Div overlapping?)

编程入门行业动态更新时间:2024-10-28 16:16:47

我正在为我的第一个网站编写代码而我正面临一个问题。我在代码中添加了一个DIV #footer ，它完全重叠了现有的DIV。

代码在下面，你能告诉我我做错了什么，以及我如何解决它？

<div class="header">
    <div class="nav">
        <ul>
            <li>ABOUT</li>
            <li>WORK</li>
            <li>TEAM</li>
            <li>CONTACT</li>
    </div>
</div>
<div class="second_section">
    <div class="container">
        <div class="copy">
            <h1>ACTUATE CONTENT</h1>
            <h3>Expert content for every business</h3>
        </div>
    </div>
</div>
<div class="third_section"></div>
<div class="fourth_section">
    <div class="col">
        <img src=
        "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
        <h2>Research</h2>
        <p>We use the most advanced research methods availble to focus down
        into your subject matter.</p>
    </div>
    <div class="col">
        <img src=
        "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
        <h2>Writing</h2>
        <p>Our writers are seasoned and have honed their craft using the best
        of the best</p>
    </div>
    <div class="col">
        <img src=
        "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
        <h2>Editing</h2>
        <p>We also do editing for up and coming writers in the literary
        genre.</p>
    </div>
</div>
<div id="footer"></div>
 
 CSS：  
* {
    margin: 0;
    padding: 0;
}

div {
    display: block;
}

.header {
    background-color: #333;
}

.nav {
    padding: 0;
    margin: 0 auto;
}

.nav ul {
}

.nav ul li {
    color: #fff;
    display: inline-block;
    padding: 20px 30px 20px 20px;
    font-family: serif;
    font-weight: 20px;
}

.second_section .container {
    background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
    height: 900px;
}

.copy {
    position: absolute;
    margin: 100px 50px 500px 500px;
    color: #fff;
    font-family: Garamond;
}

.third_section {
    height: 20px;
    background-color: #000;
}

.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: Garamond;
    width: 20%;
    float: left;
}

.fourth_section img {
    height: 32px;
}

.col {
    text-align: center;
    font-family: Garamond;
}

#footer {
    height: 200px;
    background-color: #333;
    padding: 20px;
}
I am writing code for my first site and I am facing a problem. I added a DIV #footer to the code and it is overlapping an existing DIV completely.  
The code is below, can you tell me what I am doing wrong, and how I can fix it?  
<div class="header">
    <div class="nav">
        <ul>
            <li>ABOUT</li>
            <li>WORK</li>
            <li>TEAM</li>
            <li>CONTACT</li>
    </div>
</div>
<div class="second_section">
    <div class="container">
        <div class="copy">
            <h1>ACTUATE CONTENT</h1>
            <h3>Expert content for every business</h3>
        </div>
    </div>
</div>
<div class="third_section"></div>
<div class="fourth_section">
    <div class="col">
        <img src=
        "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
        <h2>Research</h2>
        <p>We use the most advanced research methods availble to focus down
        into your subject matter.</p>
    </div>
    <div class="col">
        <img src=
        "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
        <h2>Writing</h2>
        <p>Our writers are seasoned and have honed their craft using the best
        of the best</p>
    </div>
    <div class="col">
        <img src=
        "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
        <h2>Editing</h2>
        <p>We also do editing for up and coming writers in the literary
        genre.</p>
    </div>
</div>
<div id="footer"></div>
 
CSS:  
* {
    margin: 0;
    padding: 0;
}

div {
    display: block;
}

.header {
    background-color: #333;
}

.nav {
    padding: 0;
    margin: 0 auto;
}

.nav ul {
}

.nav ul li {
    color: #fff;
    display: inline-block;
    padding: 20px 30px 20px 20px;
    font-family: serif;
    font-weight: 20px;
}

.second_section .container {
    background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
    height: 900px;
}

.copy {
    position: absolute;
    margin: 100px 50px 500px 500px;
    color: #fff;
    font-family: Garamond;
}

.third_section {
    height: 20px;
    background-color: #000;
}

.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: Garamond;
    width: 20%;
    float: left;
}

.fourth_section img {
    height: 32px;
}

.col {
    text-align: center;
    font-family: Garamond;
}

#footer {
    height: 200px;
    background-color: #333;
    padding: 20px;
}

                最满意答案
                
                    
                         在你的css中，你使用了display: inline-block; 和float: left; 一起。 这不是必要的。 他们有类似的效果。 删除float: left解决了问题...  
.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: Garamond;
    width: 20%;
    /* float: left; */
}
 
 的jsfiddle  
 但导致另一个。 您的.col元素的高度不同。 它们像260px, 242px, 242px 。 高度较短的柱在底部对齐。 你可以通过添加vertical-align: top到.fourth_section .col来解决这个问题。  
.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: Garamond;
    width: 20%;
    vertical-align: top;
}
 
 的jsfiddle 
In your css, you've used display: inline-block; and float: left; together. That is not necessary. They kind of have similar effect. Removing float: left solves the problem... 
.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: Garamond;
    width: 20%;
    /* float: left; */
}
 
jsFiddle 
but causes another one. Your .col elements don't have the same height. They go like 260px, 242px, 242px. Columns with the shorter height are aligned at the bottom. You can fix this by adding vertical-align: top to .fourth_section .col. 
.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: Garamond;
    width: 20%;
    vertical-align: top;
}
 
jsFiddle