下部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重叠

回答

相关问题