0

サイトから以下を見つけました: http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-az-getting-started-with-layouts-.html#fbid=Byc3E58e8v-

「このための CSS3 コードは非常に単純です。次のプロパティを追加して、特定の要素のモデルを切り替えるだけです。

#W3C-model {
box-sizing: content-box;
}

#traditional-model {
box-sizing: border-box;
}

ボックスのサイジングがどのように機能するかを理解したら、次の質問は、どこでそれを使用できるかということです。2 つの等しい列がある場合に非常に便利です。それぞれに 50% の幅を与え、パディングと境界線を追加すると、列が並んで表示されなくなります。これは、box-sizing を border-box に設定し、両方のボックスの幅を 50% に設定できる理想的なシナリオです。」

列が並んで表示されないということの意味がわかりません。ここで期待されているのは、2 つの列の間の境界線が消えるか、そのようなものであると思われます-よくわかりません。実験するこのサンプルコードがあります：

http://jsfiddle.net/hE8UZ/

全く効果が見られません。さらに、幅が本体の 50% として言及されているため、スパン要素が 250px を占有しなかった理由もわかりません。

助けてください。

ありがとう

4

1 に答える 1

0

幅が 500px のコンテナと、ボーダーが 1px、パディングが 10px、幅が 100% の子があり、box-sizing を border-box に設定した場合、box-sizing をコンテンツ ボックスに設定すると、幅は 500px になります。 + 2x10px + 2x1px = 522px.

.container {
    display: block;
    width: 500px;
}

.one {
    display: block;
    padding: 10px;
    -webkit-box-sizing: border-box;
    width: 50%;
    border: 1px solid;
}

.two {
    display: block;
    padding: 10px;
    -webkit-box-sizing: content-box;
    width: 50%;
    border: 1px solid;
}

http://jsfiddle.net/Vaj5x/

編集：

2 つの列が必要な場合は、それらを左にフロートして追加します。ここのようにhttp://codepen.io/Chovanec/pen/cuBpg

于 2013-08-28T01:25:23.463 に答える