CSS borderを追加した場合のwidthの収まり

前提・実現したいこと

divをfloatで横並びにして、親のwidthを100%にしました
下記コードだと最後のwidthにborder分が収まらなくなります
どんな端末から見ても、100%ちょうどに設定して、収まる形にしたい
width:20%;を19.5%とかに設定すれば、収まるは収まりますがその分余白が出来てしまいます
borderがあっても100%ピッタリで収める形式にするにはどうしたらいいでしょうか

該当のソースコード

CSS
1<div style="width:100%;height:20%;background-color:red">
2<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">1</div>
3<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">2</div>
4<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">3</div>
5<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">4</div>
6<div style="width:20%;height:100%;float:left">5</div>
7</div>

行動規範の内容に同意します

回答3件

とりあえず下記のようなHTMLで試してみてください。

html
1<style>
2  * {box-sizing: border-box;}
3</style>
4<div style="width:100%;height:100px;background-color:red">
5<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">1</div>
6<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">2</div>
7<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">3</div>
8<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">4</div>
9<div style="width:20%;height:100%;float:left">5</div>
10</div>

box-sizing: border-box;の意味は、kei344さんの回答のリンク先を参照ください。

現在では、CSSをHTML内に埋め込むのは時代遅れかと。

投稿2020/05/18 12:46

hatena19

総合スコア34075

こちらでいかがでしょうか?

HTML
1<div style="width:100%;height:20%;background-color:red">
2  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">1</div>
3  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">2</div>
4  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">3</div>
5  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">4</div>
6  <div style="width:20%;height:100%;float:left;box-sizing:border-box;">5</div>
7</div>

投稿2020/05/18 12:39

new1ro

総合スコア4528

ベストアンサー

box-sizing: border-box;で。

【CSS box-sizing — 幅と高さの適用方法を制御 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

投稿2020/05/18 11:46

kei344

総合スコア69606

why

2020/05/18 11:53 編集

回答ありがとうございます <div style="box-sizing: border-box;width:100%;height:20%;background-color:red"> <div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">1</div> <div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">2</div> <div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">3</div> <div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">4</div> <div style="width:20%;height:100%;float:left;;">5</div> </div> 上記を適応したところ、5番目がありえない位置に表示されます

why

2020/05/18 11:55

なぜこの位置に表示されてしまうのか回答いただけると幸いです

maisumakun

2020/05/18 12:03

</div>と<div>の間に改行が入っているので、その分のスペースが表示されて位置がずれていることが考えられます。改行を入れずに</div><div>と書くか、改行をコメントアウトして</div><div>のようにする、という対策法があります。

why

2020/05/18 12:06

改行を消してみましたが、変わりありませんでした <div style="box-sizing: border-box;width:100%;height:20%;background-color:red"><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">1</div><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">2</div><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">3</div><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">4</div><div style="width:20%;height:100%;float:left;;">5</div></div>