2

運が悪いので、しばらくの間、これについて頭を悩ませてきました。2 つの列で構成されたページがあります。左の列は左に浮動し、右の列は右に浮動します。各列内には、上下に配置するための 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がこのように重なっているのはなぜですか?

問題の Web ページへのリンクは次のとおりです: www.chrismepham.com/sites/newmjbox/index.php

4

2 に答える 2

2

問題は、 の高さを明示的に に設定したことです。これにより、高さが制限されます#recentPosts。310pxこれを削除すると、正常に動作するはずです。

于 2013-04-05T23:58:19.567 に答える
1

実数heightは#recentPosts、CSS で設定した値 (310px) を超えています。これにより、奇妙な動作が発生します#pagination

于 2013-04-05T23:56:12.460 に答える