0

ヘッダー、ナビゲーション、サイドバー、および記事を含むコンテナーがあります。記事のコンテンツが折り目を超えると、コンテナの左側にパディングまたはマージンが追加されます。コンテンツが折り目を超えるページとそうでないページを切り替えると、コンテナが右に揺れるので明らかです。

HTML

<div id="container">

<header>
    Blog
</header>

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="newpost.html">New post</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>

<aside>
    <form id="newsletter">
        <h2 label for="newsemail">Newsletter signup</h2 label>
        <input type="email" name="newsemail" placeholder="Enter email..." required>
        <button type="submit" class=submitbutton>Submit</button>
    </form>
</aside>

<article>
    <section><h1>Post 1</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 2</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 3</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
</article>

CSS

ヘッダー、フッター、ナビゲーション、記事、脇{表示: ブロック; }

#container{ ボーダー半径: 20px; 背景色:#97C02F; パディング:10px 50px 30px 50px; マージン:0px 自動; 幅:880px; オーバーフロー:自動; }

脇に{ float:left; 幅:150px; パディング右:15px; 赤色; マージントップ:15px; }

記事{フロート：左; 幅:660px; margin-left:20px; }

section{ font-family: 'Droid Sans', sans-serif; 色:#FFFFFF; フォントサイズ:15px; フォントの太さ:通常; }

すべてのコードを挿入したわけではありませんが、必要なビットを挿入したと思います。

4

2 に答える 2

2

html { overflow-y:scroll }コンテンツをスクロールする必要がない場合でも、スクロールバーを強制するために使用できるため、このジャンプは発生しません。

于 2011-10-27T13:23:15.597 に答える