1

ページの幅を % で指定しようとしています。

だから私は次のコードを試しました

<div id="mainContent" style="height: 350px">
               <div class="grid4">

                </div>
                <div class="grid4">

                </div>
                <div class="grid4">

                </div>

            </div>

以下のGrid4 css

.grid4
{
    Width: 33%;
    float:left;
}

メインコンテンツの幅100%.

今、私は次の Div を押し下げているpadding or margin in percentageいずれかを提供しようとしています。grid4

Width の内側のパディングを指定するには、どのプロパティを使用する必要がありますか?

ありがとう

4

3 に答える 3

4

パディングまたはマージンが.grid4列に適用される場合、それらのサイズが列の幅に追加されます: 33% + 33% + 33% + (パディングとマージンの組み合わせが何であれ) = ?? (おそらく 100% より大きいもの)。それが柱が壊れている理由です。

各列の子要素にパディングまたはマージンを適用すると、サイズは列の幅に追加されません。33% + 33% + 33% = 99%。

列にパディングまたはマージンを適用する必要がある場合は、パディングまたはマージンと組み合わせると、合計が 100% 以下になる量まで幅を減らす必要があります。

于 2013-03-28T04:13:35.063 に答える
3

標準の CSS ボックス モデルでは、パディングによって値がコンテナーの幅に追加されます (幅 + パディング + 境界線 = ボックスの実際の表示/レンダリング幅)。

つまり、grid4 の幅 = 33% + パディングです。それがそれを押し下げる理由です。

CSS Box Sizing を使用できます。これにより、コンテナにパディングを追加しても、実際の幅は指定した値に変更されません。

#mainContent{
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;   
            box-sizing: border-box;     
}

その後、希望どおりに動作するはずです。

それ以外の場合は、各 grid4 のパディングと幅を合計で 33% になるように計算する必要があります。

于 2013-03-28T04:18:07.940 に答える