0

別の div 内に div を配置したいのですが、その div 内には 10px のパディングがあり、これは div 幅 100% です。ただし、これを行うには、div は親 div の外に出ます。

jsFiddle の例:

http://jsfiddle.net/kCypn/5/

.caixa
{   
    float : left;
    width:100%;    
    background-color:white;
    padding:25px;
}

私が抱えているもう1つの問題は、幅150pxの左側に配置されたdivと、残りのすべてのスペースとパディングを占める別のdivがあります。

4

3 に答える 3

2

デフォルトでは、CSS ボックス モデルは要素の最終的な幅を と の合計として計算widthしborderますpadding。box-sizingプロパティを使用すると、この紛らわしい動作を克服できます。

.caixa
{   
    float : left;
    width:100%;    
    background-color:white;
    padding:25px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/kCypn/7/

それについて読む: http://css-tricks.com/box-sizing/
ブラウザのサポート: http://caniuse.com/#feat=css3-boxsizing

于 2013-03-21T11:25:59.373 に答える
0

div はすでに用意されているため、クラスでorを削除 し、必要に応じて定義しますfloatwidth 100%.caixa width 100%;padding

.caixa{   
    float : left; // remove this line
    width:100%; // remove this line

}

デモ フルスクリーン

ウィンドウのデモ

私はあなたのコードにそれらが必要ない float leftかwidth 100%、あなたのクラスでチェックします .caixa

于 2013-03-21T11:28:59.007 に答える
0

width + padding = Total valueそのため、スクロールバーが発生しています。削除floatしてwidthから.caixa

.caixa
{     
    background-color:white;
    padding:25px;
}

デモ

于 2013-03-21T11:26:06.810 に答える