0

パーセンテージとマージンでボーダーボックスをどのように使用しますか? 例を次に示します。

<style>
.half{
    width: 50%;
    float: left;
    background: red;
    margin: 5px;
    box-sizing: border-box;
            box-shadow: 0px 0px 3px black;
}
</style>
<div class="half">half</div>
<div class="half">half</div>

div(.half) が画面の 50% を占めるようにしたい - div の周りの 5px のマージンは、試行するたびに 50% よりも広くなり、次の行に 2 番目のボックスを配置するたびにポーズ可能です。可能であれば、% ベースのマージンを避けるため。

4

3 に答える 3

3

マージンが幅の一部として計算されることはありません。 box-sizing: border-box;

したがって、マージンを次のように置き換えてみてくださいborder: 5px solid transparent

または、境界線をオーバーライドできない場合は、達成したい効果に応じて、疑似要素を試してください:after/:before。

.half {
    width: 50%;
    float: left;
    background: red;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px black;
}

.half:after, .half:before {
    content: "";
    width: 5px; /* or more if you need more space */
    display: inline-block;
}

例: http://jsbin.com/imiqak/1/edit

または、次のようにネストされた要素を使用することもできます。

.half {
    width: 50%;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
}

.half p {
    background: red;
    box-shadow: 0px 0px 3px black;
}

例: http://jsbin.com/imiqak/3/edit

于 2013-07-31T09:55:28.763 に答える
0

これを試して：

CSS:

<style type="text/css">
.half{
    width: 49%;
    float: left;
    background: red;
    box-sizing: border-box;
}

.half:last-child{
margin-left: 1%;
}
</style>

HTML:

<div class="half">half</div>
<div class="half">half</div>
于 2013-07-31T10:06:53.480 に答える
0

margin はボックスの外側と見なされます (ボックス内ではなく、ボックスの周囲のスペースです)。余白のサイズは、コンテナーの幅の一部としてカウントされません。

実際、 と入力box-sizing: border-box;すると を意味the size of the box includes the border sizeし、下のこの画像を見ると、余白が境界線の後にあることがわかります。つまり、無視されます。

ここに画像の説明を入力

于 2013-07-31T10:00:04.403 に答える