42

コンテナの幅をパーセンテージで定義しました。ボーダー (幅の右側に 3 ピクセル) を追加したいのですが、コンテナーの幅は % 単位で、ボーダーの幅は px 単位であるため、コンテナーの幅を調整するにはどうすればよいですか?

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

.left の右側に 3px のボーダーを追加したいです。例えば：

.left{
    width:30%;
    border:3px solid #000;
}

% で幅を定義したので、.left の幅を再調整する最良の方法は何ですか? おおむね幅を 29% に減らすことができますが、正確に行いたいと考えています。

4

5 に答える 5

97

プロパティを使用しbox-sizing: border-boxます。ボックス モデルの動作を変更して、パディングとボーダーを要素の幅全体の一部として扱います (ただし、マージンではありません)。これは、要素の設定された幅または高さに、パディングと境界線に設定された寸法が含まれることを意味します。あなたの場合、それは要素の幅とその境界線の幅が利用可能なスペースの 30% を消費することを意味します。

CSS ボックス モデル

それに対するサポートは完全ではありませんが、ベンダー プレフィックスは、すべてではないにしてもほとんどの最新のブラウザーをキャッチします。

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

詳細については、MDNおよびQuirksmodeを参照してください。

Quirksmode によると、上記の 3 つのベンダー プレフィックス ( -moz-、-webkit-および-ms-) を使用すると、IE8 を含むすべてのブラウザーがサポートされます。

于 2012-06-17T09:05:46.603 に答える
5

最も簡単なクロスブラウザの方法は、外側の div に境界線を設定せず、代わりに 内の新しい div に設定すること.leftです。シンプルで、うまく機能します。

于 2012-06-17T10:15:48.453 に答える
2

それは少しトリッキーですが、それを回避する方法についてこの投稿をチェックしてください：

プロパティもあなたbox-sizingに興味があるかもしれません、これをチェックしてください：

于 2012-06-17T08:59:11.803 に答える
-2

好きpxに変えるだけvw

border-width: 10px;

に

border-width: 10vw;

その何パーセントが何をするか....

于 2014-04-20T10:32:33.643 に答える