5

次の要素があります。

<body>
    <div id="container">
        <div id="sidebar1"></div>
        <div id="content">
            <h3>Lorem ipsum</h3> 
            <p>Whatnot.</p>
        </div>
        <div id="sidebar2"></div>
    </div>
</body>

次のスタイル:

/* ~~ this fixed width container surrounds all other divs~~ */
 #container {
    width: 960px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}
#sidebar1 {
    float: left;
    width: 180px;
    /*border: 2px solid black;*/
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}
#content {
    padding: 10px 0;
    width: 600px;
    float: left;
}
#sidebar2 {
    float: left;
    width: 180px;
    /*border: 2px solid black;*/
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}

私はこのレイアウトを達成しようとしています: http://jsfiddle.net/QnRe4/

しかし、国境のコメントを外すとすぐに、次のようになります: http://jsfiddle.net/FZxPQ/

**解決済み**

境界線の幅が各要素の合計幅に追加されたため、幅が広すぎてコンテナーに収まりませんでした。各列の幅から境界線の幅の 2 倍を削除すると、問題が解決します: http://jsfiddle.net/FZxPQ/4/

4

4 に答える 4

7

CSSbox-sizingで救出！このプロパティ

要素の幅と高さの計算に使用されるデフォルトの CSS ボックス モデルを変更します

border-box値は次のことを意味します。

幅と高さのプロパティには、パディングとボーダーが含まれます

/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
         box-sizing: border-box;
    -moz-box-sizing: border-box;
}

ただし、ブラウザのサポートは 100% 標準化されているわけではありません。

他の回答がすでに述べているように、サイドバーを押し出す余分な幅は、幅の計算にボーダー幅が含まれているためです。box-sizing指定された幅/高さを持つ要素には、最終的な幅/高さの計算に境界線とパディングの値を含める必要があることをブラウザーに伝えるだけです。

于 2013-05-24T13:34:58.293 に答える
4

問題は、ボーダーを追加すると、外側の div のサイズが各サイズで 4, 2px 増加することです。したがって、コンテナのサイズを 8 ピクセル大きくする必要があります。

コンテナを次のように変更します。

 #container {
    width: 970px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}

参照: http://jsfiddle.net/QnRe4/13/

于 2013-05-24T13:36:14.003 に答える
3

境界線を適用すると、それが div の外に出てしまうため、サイドバーの幅が 184px になり、コンテナーに収まりません。追加してみてくださいwidth: 176px

http://jsfiddle.net/QnRe4/12/

#sidebar1 {
    float: left;
    width: 176px;
    border: 2px solid black;
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}
于 2013-05-24T13:32:59.657 に答える
1

このような？http://jsfiddle.net/QnRe4/3/

block境界線を削除すると、要素の表示プロパティが失われます。

したがって、display: blockそれらの要素に追加すると、それが解決されます。

また、レイアウトを維持するために要素の幅を 4 ピクセル幅に調整しました。これらの境界線を削除すると、これらの要素がページ上で占有するスペースが本質的に減少するためです。

于 2013-05-24T13:32:27.447 に答える