为什么元素下降

Question

基本上我有3张图片和div.contact坐在一个Section.gallery中包含在一起。 div.contact已被右移，相对定位，但不是图像。 我的问题是我不能在页脚中获得'NEWSLETTER'来占据右侧的可用空间，它会一直下降。

然而，当申请一个明确的：既能页脚看到happens.It创建页脚和Section.gallery之间的巨大空间，但“消息”占用了所有的空间

当我检查谷歌铬检查元素，有一个很大的余量，我没有申请。

相关的代码

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“显示画廊”捕捉屏幕的所有宽度。所以你的“联系”浮动右div被添加在div块的底部。 （从第二个div“联系人”中删除“top：-199px”，你会看到为什么当你添加明确的时候：对于footer你都有这个空白）。 你得到正确的页脚的边距是你应用的“.contact”div的占位符“top：-199px”