0

Tumblr のレイアウトを作成していて、問題が発生しています。すべてが正常に機能しましたが、サイドバーを追加するとすぐに、コンテナーがページの高さの拡張を停止しました。サイドバーのすぐ下で止まりますが、以前にコンテンツ セクションの幅を広げたときの理由がわかりません。

URL: http://nellyswritingroom.tumblr.com/

構造CSS:

#container {
    margin: 0 auto;
    padding: 30px 60px 30px 60px;
    width: 900px;
}
#main {
    margin-top: 50px;
}
#content {
    width: 620px;
    float: left;
    margin: 0;
}
aside {
    width: 220px;
    float: left;
    margin-left: 60px;
}


header#top {
    text-align: center;
    height: 293px;
    margin-bottom: 8px;
}

header#top h1{
    position:relative;
    width:500px;
    height:285px;
    overflow:hidden;
    float:left;
}

header#top h2 {
    position:relative;
    width:400px;
    height:285px;
    overflow:hidden;
    float:left;
}

HTML スケルトン:

<div id="container">
    <header id="top>
        <h1>
        content
        </h1>
        <h2>
            content
        </h2>
    </header>

    <nav>Nav Goes here</nav>

    <section id="content">
        Content on the left
    </section>

    <aside>
        Sidebar Content
    </aside>
</div>

どんな助けでも大歓迎です！

4

2 に答える 2

0

フロートされているため#content、レイアウトの一部ではなくなり、親はサイドバーを含むサイズのみになります。

float:leftコンテンツ セクションからを削除し、 に適用float:rightする必要がありますaside。これは、コンテンツが常にサイドバーよりも長いことを前提としています。そうでない場合は、両方の要素の下にクリア要素を使用するか、コンテナもフロートさせるdisplay:blockか、相対位置を調べて、それらを隣り合わせに配置することができます。

于 2013-05-31T14:00:40.520 に答える
0

clear: both; を追加する必要があります。aside 要素が閉じた後。

だから後：

<aside>
    Testing
</aside>

追加：

<div style="clear: both;"></div>

そして、問題が解決されるべきであることがわかります。

もちろん、インライン CSS を使用するよりも、.clear CSS クラスを作成して呼び出した方がよいでしょう。

于 2013-05-31T14:01:41.040 に答える