下部div與上部div重疊

在沒有任何運氣的情況下，我一直在絞盡腦汁。我有一個由兩列組成的頁面。左欄浮起，右欄浮起。每列中有兩個div，意思是一個在另一個之上。在右欄中，他們看起來很好，上面的形式和下面的div應該是這樣，但在左欄中，下面的div與上面的div的底部重疊15px左右。下部div與上部div重疊

繼承人的index.php文件：

<!-- wraps entired contents of website below header --> 
<div id="mainWrap"> 
    <div id="leftColumn"> 
     <!-- module for most recent posts --> 
     <article id="recentPosts"> 
      <h1>Recent Submissions</h1> 
      <section id="recentPostsContent"> 
       <p>upper right div content</p> 
      </section> 
     </article><!-- close recentPosts --> 
     <!-- Pagination --> 
     <div id="pagination"> 
      <p>lower left div content</p> 
     </div> 
     <!-- end pagination --> 

    </div><!-- close left column --> 

    <div id="rightColumn"> 
     <!-- Search bar --> 
     <form id="searchForm" action="search.php" method="post"> 
      <input class="navSearchInput" type="text" name="searchInput" placeholder="search here.."/> 
      <input class="navButtonSearch" type="submit" name="submitSearch" value="Search" /> 
     </form> 
     <!--end search bar --> 

     <!-- randomly generated image linking to a post --> 
     <article id="randomPost"> 
      <h1>Hightlighted Post</h1> 
      <section id="randomPostContent"> 
       <p>content</p> 
      </section> 
     </article><!-- close randomPost --> 

    </div><!-- close right column --> 
    <div style="clear:both;"></div><!-- clears floating columns --> 
</div><!-- close mainWrap -->

和相關的CSS：

#mainWrap{ 
margin:0 auto; 
width:980px; 
min-height:700px; 
margin-top:20px; 
} 
#leftColumn{ border:1px solid green;width:700px;float:left;margin:0 0px 0 0;min-height:500px;} 
    #recentPosts{width:700px;height:310px;} 
    #recentPostsContent{ 
     width:700px; 
     height:300px; 
     border:1px solid #dfdfdf; 
     border-radius:0 0 3px 3px; 
     margin:0 0 20px 0; 
    } 
    #recentPosts h1{ 
     width:652px; 
    } 
    #pagination{ 
    width:700px; 
    height:40px; 
    border:1px solid #dfdfdf; 
    border-radius:0 0 3px 3px; 
    } 

#rightColumn{border:1px solid green;width:254px;float:right;min-height:500px;} 
    #randomPost h1{width:205px;} 
    #randomPost{ 
    width:250px; 
    height:310px; 
    } 

    #randomPostContent{ 
     width:253px; 
     height:300px; 
     border:1px solid #dfdfdf; 
     border-radius:0 0 3px 3px; 
    }

爲什麼是低格重疊喜歡它？

這裏是有問題的網頁中的鏈接：www.chrismepham.com/sites/newmjbox/index.php

來源

2013-04-05 crm

你可以做一個jsfiddle.net演示重疊？當我拍拍代碼時很難說清楚問題。 – 2013-04-05 23:51:17

您已明確將'＃recentPosts'的高度設置爲'310px'，其高度不足以包含內容。 – 2013-04-05 23:51:26

@Unvle Iroh如果您導航到我的文章底部的網址，您會看到包含文本「左下角div內容」的底部div覆蓋了大約15px的上部div。 – crm 2013-04-05 23:54:30

問題是，您已明確將高度#recentPosts設置爲310px，這會導致高度被限制。如果你刪除它，它應該表現正常。

來源

2013-04-05 23:58:19

來源，供參考：http://liveweave.com/hxy1YM – 2013-04-06 00:01:35

真正的#recentPostsheight比你在你的CSS（310px）設置一個。這會導致奇怪的行爲#pagination

來源

2013-04-05 23:56:12

下部div與上部div重疊

回答

相關問題