Question

现在已经绞尽脑汁一段时间没有运气了。我有一个由两列组成的页面。左列向左浮动，右列向右浮动。每列内部都有两个div，它们一个位于另一个之上。在右栏中，它们似乎做得很好，上面有一个表格，下面有一个div，但是在左栏中，下面的div与上面div的底部重叠了15px左右。

继承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;
    }

为什么下层div重叠如此？

以下是相关网页的链接：www.chrismepham.com/sites/newmjbox/index.php

Answer 1

问题是您已明确将#recentPosts的高度设置为310px，这会导致高度上限。如果你删除它，它应该表现正常。

Answer 2

height的真实#recentPosts超过您在CSS（310px）中设置的值#pagination。这会导致{{1}}

上的奇怪行为

下部div与上部div重叠

2 个答案: