5

div でパディングを使用しようとしていますが、これは別の div (「コンテナー」) でラップされています。この単純な質問をお詫びしますが、答えが見つかりませんでした。

私が使用しない限りpadding:10px;、ページの構造は安定しています。つまり、右の div が左に浮いています (「コンテンツ」は「サイドバー」の脇にあります)。

<html>
<head>
<style type="text/css">
.container {
max-width: 960px;
background-color: RED;
height: 200px;}

.sidebar {
background-color: GREEN;
width: 30%;
float: left;}

.content {
background-color: YELLOW;
float: left;
width: 70%;
padding: 10px;}
</style>
</head>

<body>
    <div class="container">
    <div class="sidebar">
    <p>text in sidebar</p>
    </div>
    <div class="content">
    <p>text in content</p>
    </div>
    </div>

</body>
</html>

右の div ('content') を使用padding:10px;すると、'sidebar' の横に浮く代わりに 'sidebar' の下に移動します。

試してみましたがclear: left;（両方とも）、役に立ちません。

上記の特定のスタイルではない解決策を<p>いただければ幸いです。

4

4 に答える 4

6

ページ幅の 100% を超えて幅が狭くなるのを避けるために、.contentいくつかの妥協が必要になる場合があります。私はいくつかの解決策を考えることができます：

1) のすべての直接の子をパディングします.content

.content > * {
    padding-left:10px;
}

</p>

2).contentパーセンテージを使用してパディング

.content {
    padding-left:2%;
    width:68%;
}

3) ボックス モデルの動作を変更する

.content {
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;         
}

これら 3 つの解決策はすべて、いくつかの悪い点をもたらします。

  1. .content要素に 10px 以外のパディングを設定したい場合、のすべての直接の子をパディングすると、問題が発生する可能性があります。
  2. パーセンテージを使用したパディング.contentは、サイズの異なるウィンドウではわずかに異なって見えます。
  3. ボックスモデルの動作を変更すると、デフォルトの標準 CSS モデルが広く使用されていないものに変更されるため、何をしているのかわからない場合は悪い可能性があります (この例では、基本的に最新のブラウザーに使用するように指示しています)。 IE の quirksmode ボックス モデル) ですが、それはあなたの場合に最適なソリューションのようです。ブラウザの市場シェアが約 2% しかない IE7 がサポートされていないことを除けば、基本的に問題はありません。
于 2012-08-04T00:57:51.630 に答える
1

その行動は完全に正しいです。いわゆるボックスモデル（要するに）を覚えておいてください：

マージン、ボーダー、パディングはすべて幅の値に追加されます

この場合、計算する必要があります

30% + 10px + 70% + 10px = 100% + 20px

ブラウザーは css プロパティのサポートを開始しますbox-sizing(詳細については、 https: //developer.mozilla.org/en-US/docs/CSS/box-sizing を参照してください)。border-boxデフォルトのボックスモデルを変更するために設定できます。

ただし、これらのブラウザ サフィックスも忘れずに使用してください。

box-sizing: border-box;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;
于 2012-08-04T00:53:31.480 に答える
0

これは一般的な問題であり、典型的な Web デザインでは、一般的なロジックが期待するように動作しません。

何が起こっているのかというと、実際にはパディングによって.contentdiv が割り当てられたスロットよりも広くなるため、下に押し込まれます。

これにはいくつかの方法があります。

このルール:box-sizing:border-box;と を設定するwidth:100pxとpadding:10px;、ブラウザーは何があっても DIV 全体を自動的に 100px にします。

実際に起こっていることは、DIV の幅が 80 ピクセルになり、両側に 10 ピクセルのパディングがあることです。

私はjsfiddleを作成しました

このルールに対するブラウザーのサポートは一般的に非常に優れていますが、js に追加したすべてのルールを含めるようにしてください (つまり、-webkit-、-moz- を含むもの、および上記のもののみbox-sizing:border-box;) 。

参考までに、すべてのルールは次のとおりです。

 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;
于 2012-08-04T00:57:23.150 に答える