2

一直在为此绞尽脑汁，但没有任何运气。我有一个由两列组成的页面。左列向左浮动，右列向右浮动。每列内有两个 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.chrissepham.com/sites/newmjbox/index.php

4

2 回答 2

2

问题是您已明确将高度设置为#recentPoststo 310px，这会导致高度被限制。如果您删除它，它应该会正常运行。

于 2013-04-05T23:58:19.567 回答
1

真实height的#recentPosts不仅仅是你在 CSS 中设置的（310px）。这会导致奇怪的行为#pagination

于 2013-04-05T23:56:12.460 回答