-1

Web ページの HTML を挿入するたびに。これ#content divはウィジェット/サイドバーの下にあり、私はすでに試しましたposition:absolute-それにより、画像のサイズが変更されません。

#content {
    background: #fff;
    margin: 2px 0 2px;
    padding: 20px 62px;
    width: 68%;
    display: block;
    float: left;
    margin-left: 25%;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}

/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
    width: 25%;
    float: left;
    margin: 2px 0 2px;
}
.widget {
    background: #0b2d7e;
    margin: 0 0 0px;
    padding: 0px 20px;
    /* rounded corner */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}
4

3 に答える 3

1

以前教えようとしたのと同じレッスンです。パディングがあるため、合計が 100% になりません。68% + 25% + 25% + 追加のパディング = 100% をはるかに超えています。

ボックスの幅が 50% で、左右に 10px のパディングと 1px の境界線がある場合、50% +20px+2px になります。

上記とまったく同じ 2 つの div がある場合、100% +40px +40px +2px +2px = 100% 以上になります。

box-sizing: border-box;上記のパディングとボーダーの問題を解決するために使用します。次に、マージンを考慮する必要があります。

ボックスのサイズについては、使用できますかを参照してください。

コードを修正する JS Fiddle を次に示します</aside>。不要な迷走もありました。

http://jsfiddle.net/a2YSa/1/

私が提供したコードでは、box-sizing: border-box;パディングとボーダーを含む幅を計算するように div に指示していることに注意してください。次に、25% のサイズの左の列と、25% の余白 = 100% の 50% の右のコンテンツ列があります。

これは、サイドバーが 25%、メインが 75% で、マージンが 0 のフィドルです。

http://jsfiddle.net/a2YSa/3/

私の最後のフィドルのスクリーンショット：

ここに画像の説明を入力

于 2013-03-26T16:47:16.333 に答える
0

問題はここにあると思います：

content width: 68%
content margin-left: 25%
sidebar width: 25%

現在、100% 以上を使用しています。それが問題でない場合は、HTML コードも投稿するか、幅とパディング/マージンを Firebug で確認してください。それは最も簡単な方法です。

于 2013-03-26T16:42:36.003 に答える
0

firebug を使用して問題を視覚化してみましたか? #content の 25% の左余白を削除する必要があると思います...

于 2013-03-26T16:37:32.200 に答える