BinaryDevelop
  1. ホーム
  2. html

[解決済み] divタグをアウトライン化するには？

2022-02-12 18:17:37

質問事項

divタグをアウトライン化しようとしています。私は border:0.01em solid black が、正しくはまりません。 私のスクリプトは以下の通りです。 

<html>
<body>
<div id="color" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; background:yellow;  float:left;"></div>
<div style="width:50%; height:500px; background:blue; float:left;">    </div>
</div>
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; border:0.01em solid black;  float:left;"></div>
<div style="width:50%; height:500px; border:0.01em solid black; float:left;"></div>
</div>
</body>
</html>

の等倍セパレーションは、その div id = color タグは100%の幅に収まります。

しかし div id = border タグは100%に収まりません。 を追加したため border を分離するために div のように、50% + 0.01emのようにサイズが大きくなります。

その理由は div id = border タグのサブdivタグが100%に収まらないので、2番目のサブdivタグが100%から下に落ちています。

つまり divタグをボーダーにしない？どうすればいいのでしょうか？しかし、私はそれを減少させない50％で区切りたい。

どうすればいいですか？

標準のボックスモデルでパディングとボーダーは 追加 を定義された幅に追加します。

ボックスサイズに設定した場合 border-box とすると、宣言された幅は 含む padding & bordersのいずれかを指定します。

ユニバーサルセレクタの一部として見られることが多い。 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="border" style="width:100%; height:500px; background:gray;">
  <div style="width:50%; height:500px; border:1px solid black;  float:left;"></div>
  <div style="width:50%; height:500px; border:1px solid black; float:left;"></div>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します