为什么元素会下降

Question

基本上我有3个图像和一个div.contact坐在彼此旁边包含在Section.gallery中.div.contact已经向右浮动且相对定位但不是图像.我的问题是,我无法在页脚中获取"NEWSLETTER"占用右侧的可用空间,它不断下降.

然而,当应用一个明确的:两个页脚看看会发生什么.它在页脚和Section.gallery之间创建一个巨大的空间,但'NEWSLETTER'占用了所有的空间

当我检查谷歌铬检查元素,有一个很大的余地,我不适用.

相关代码

HTML部分

   <section class="gallery">

        <div class="display-gallery">
            <img src="images/picture.png" />
            <img src="images/picture.png" />
            <img src="images/picture.png">
        </div>
        <!--End gallery-->

        <div class="contact">
            <p>contact</p>
            <h2>booking <br />
                <span>0123.456.789</span><br />
                <span>0123.456.789</span><br />
                <span> contact@xidian.com</span>
            </h2>
            <a href="#" class="findout-more ">Find out more</a>
        </div>
        <!--End-->

    </section>
    <!--End Section-->

    <footer>
            <div class="nav-wrapper">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="#"> Home </a></li>
                        <li><a href="#"> Biography </a></li>
                        <li><a href="#"> Photo Gallery</a></li>
                        <li><a href="#"> Calendar </a></li>
                        <li><a href="#"> Videos </a></li>
                        <li><a href="#"> Contact me </a></li>
                    </ul>
                    <ul class="second-nav">
                        <li><a href="#"> Home </a></li>
                        <li><a href="#"> Biography </a></li>
                        <li><a href="#"> Photo Gallery</a></li>
                        <li><a href="#"> Calendar </a></li>
                        <li><a href="#"> Videos </a></li>
                        <li><a href="#"> Contact me </a></li>
                    </ul>
                </nav>


                <div class="more-info">
                    <h3>some information here</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipis ellt. Cras non nibh
                        sed vellt ultrices convallis eget vitae leo. Vestibulum porttitor dolor
                        sed is semper id consequat urna tristique vivamus sodales, nibh id comisam risti.
                    </p>
                </div>

                <div class="follow-me">
                    <h3>follow me </h3>
                    <a href="">
                        <img src="images/youtube.png">
                    </a>
                    <a href="">
                        <img src="images/fb.png">
                    </a>
                    <a href="">
                        <img src="images/twitter.png">
                    </a>
                    <a href="">
                        <img src="images/link.png">
                    </a>

                </div>

                <div class="newsletter">
                    <h3>newsletter</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur<br />adipiscing ellt. Cras non nibh sed.</p>
                    <input type="text" name="comment" ><br />
                    <input type="submit" value="Send" >
                </div>
        </div>

CSS:

.display-gallery img  {
    width: 215px ;
    height:195px;
    margin-right: 30px;
    border: 1px solid #D9D9D9;
}

.display-gallery img:hover{
    transition-duration: 0.5s ;
    transform: scale(1.2);
}

.contact  {
    float: right;
    width: 215px ;
    height:195px;
    position: relative;
    top: -199px;
    border: 1px solid #D9D9D9;
}

.contact h2 {
    font-size: 16px;
    text-transform: uppercase;
    line-height: 20px;
    padding-left: 12px;
}

.contact p {
    text-transform: uppercase;
    color: #8e3a17;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 18px;
    padding-left: 12px;
}

.contact a {
    margin-top: 10px;
    margin-left: 12px;
}

.nav-wrapper {
    outline: solid 1px greenyellow;
    overflow: hidden;
    border-top: 2px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    padding-top: 14px;
    padding-bottom: 13px;

}
.footer-nav ul  {
   float: left;
   margin-right: 25px;

}

.footer-nav ul li {
    font-size: 10px;
    text-transform: uppercase;
    line-height: 19px;
}

.second-nav {
    margin-right: 25px;
}

.more-info {
    border-left: dashed 1px #D9D9D9;
    border-right: dashed 1px #D9D9D9;
    float: left;
    width: 245px;
    padding-left: 20px;
    padding-right: 20px;
}

.more-info h3 {
    font-size: 10px;
    text-transform: uppercase;
    line-height: 19px;
}

.more-info p {
    font-size: 10px;
    display: inline-block;
    line-height: 13px ;
    padding-top: 17px;
    width: 210px;
    word-break: break-all;
}

.follow-me {
    padding: 0 25px 0 25px ;
    float: left;
    width: 245px;
    border-right: 1px dashed #D9D9D9;
}

.follow-me h3 {
    text-transform: uppercase;
    font-size: 10px;
    line-height: 19px;
}

.follow-me img {
    padding-top: 17px;
    margin-right: 7px;
}

.newsletter {
    float: right;
    width: 205px;
   }

.newsletter h3 {
     text-transform: uppercase;
     font-size: 10px;
     line-height: 19px;
     padding-bottom: 7px;
}

.newsletter p {
     font-size: 10px;
     display: inline-block;
     line-height: 13px;
     padding-bottom: 6px;
 }

input[type= text] {
    width: 205px;
    height: 20px;
    border: 1px solid #D9D9D9;
}

input[type = submit] {
    margin-top: 7px;
    float: right;
    display: inline-block;
    background-color: #8e3a17;
    font-size: 11px;
    color: white;
    width: 55px;
    height: 20px;
    line-height: 15px;
    text-align: center;
    box-shadow: 1px 1px 2px #8e3a17;
}

Ps:我确实应用了css重置抱歉很长的帖子

Answer 1

更新CSS如下：

.gallery {
    overflow: hidden;
}
.display-gallery {
    float: left;
}
.contact  {
    float: right;
    width: 215px ;
    height:195px;
    /*position: relative;
    top: -199px;*/ 
    border: 1px solid #D9D9D9;
}

你的第一个 div“display-gallery”捕获了屏幕的所有宽度。所以你的“联系人”浮动右div被添加到div块的底部。（从第二个 div“contact”中删除“top：-199px”，当您将clear：both添加到页脚时，您就会明白为什么会出现此间隙）。页脚右侧的边距是您应用“top:-199px”的“.contact”div 的占位符