爲什麼元素下降

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」