0

私はこのコードを持っています:

<div class="container">
    <div class="contained one">foobar</div>
    <div class="contained two">foobar</div>
</div>    

-- css --

.container {
    background: red;
    width: 500px;
    height: 200px;
}
.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 10px;
}
.one {
    background: blue;
}
.two{
    background: green;
}

含まれている にマージンを付けたいのdivsですが、方法がわかりません..

4

2 に答える 2

0

パディングと同じです。 margin: 10px;例えば。

マージンも要素の幅に計算する必要があることに注意してください。したがって、% マージンを指定することをお勧めします。次に、マージンの合計 % に幅を加えたもの = 100% であることを確認してください。

あなたは次のようなことができます...

.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 45%;
    margin: 2.5%;
    float: left;
    padding: 10px;
}

これは、(2.5left + 2.5right) * 2 ボックス = 10% の総余白スペースであるため、機能します... 10% + 45%/ボックスは 10% + 90% = 100% です。

JSフィドル

コメントでの質問への回答:

コンテナーには一定の幅があるため、その幅がどんなに大きくても、その中に収まる量は限られます。CSS がコーディングされる方法では、要素の「TOTAL」幅には、定義された幅、ボーダー スペース、パディング、およびマージンが含まれます。これは、すべての要素が動作するデフォルトの方法です。上記のコードでは、box-sizing: border-box. これにより、パディングとボーダーを含む「幅」プロパティを計算するようブラウザに指示します。残念ながら、余白スペースも含むコードはありません。

では、こんな風に想像してみてください。100 100 個のボールが入る箱があり、箱のふたを閉めたままです。101玉だとフタが閉まりません。では、50 個の青いボールと 50 個の赤いボールを箱に入れたいとしましょう。100球制限を超えていないのでフタを閉めても大丈夫です。ここで、50 個の赤いボールと 50 個の青いボールの間に一定のスペースが必要だとしましょう。この空間が空の「空気」だと想像してみましょう。しかし、実際には空気も空間を占有します。したがって、2 つのグループのボールの間に 10 個の「ボール ユニット」に相当する空気の「スペース」を収めるためには、箱の蓋を閉じたままにするために、2 つのうちの 1 つが発生する必要があります。

ボックスを 10 単位大きくして、合計 110 個の「ボール ユニット」を作成できます。赤のボールが 50 個、青のボールが 50 個、2 つのグループを隔てる空気が 10 個です。または、10個の「ボール単位」の空気を入れるために、すでにコンテナ内にあるボールをいくつか取り除くことができます. したがって、45 個の青いボールと 45 個の赤いボール、および 10 ユニットの空気を = 100 にして、箱のふたを閉めることができます。赤いボール、青いボール、空気の数が、ボックスの最大 100 ボール単位に等しい限り、それらは収まり、蓋を閉じることができます。任意の組み合わせを使用できます。たとえば、赤のボール 10 個、青のボール 10 個、緑のボール 10 個、黄色のボール 10 個、紫のボール 10 個、各グループの後に 10 単位の空気を入れることができます。あれは...

10 赤 + 10 空 + 10 青 + 10 空 + 10 緑 + 10 空 + 10 黄 + 10 空 + 10 紫 + 10 空

10+10+10+10+10+10+10+10+10+10 = 100

さて...そうは言っても、使用していない場合はbox-sizing: border-box;、余白とともに計算にパディングとボーダーも含める必要があります。

于 2013-05-02T16:07:08.713 に答える