🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1258閲覧

div 行列 2重構造  内側の箱の配列が 勝手に改行されてしまいます

xmg

総合スコア20

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/31 02:04

編集2020/12/31 04:59

イメージ説明

問題点

以下のコードを実行すると、2行目の div Box (赤色) が
予想される場所ではなく、
緑色の 親 div の下の行に 勝手にずれてしまいます。

問題状況を再現させるコード

<!DOCTYPE html><html> <head><meta charset="UTF-8"> <STYLE > .rowH6 { height: 6px; width: 200px; } .rowH div { height: 6px; width: 30px; } .iB_all div { display: inline-block ; } .borderRed div { border: thin solid red ; } .borderGreen { border: thin dotted green ; } .pink { background-color: pink; } .yel { background-color: yellow; } .mgnX { margin: 20px; } .w { width: 200px; } </STYLE> </head> <body> <div class=" mgnX " > <div id="rN10" class="rowH w pink iB_all " > <div class=" " ></div > <div class=" " ></div > </div> <div id="rN11" class="rowH rowH6 borderRed borderGreen iB_all " > <div class=" " ></div > <div class=" " ></div > <div class=" " ></div > </div> <div id="rN12" class="rowH w yel iB_all " > <div class=" " ></div > <div class=" " ></div > </div> </div> </body> </html>

制約事項

子供 div の数が実際には、とても多いため、子供の div のひとつひとつに
class 指定を書き込む作業をなくすことが必要です。

質問

この事例で、なぜ 赤色の 子供 div が 親側 div (緑色) の中に納まらずに
桁ずれを起こしてしまうのか、原因を教えていただけますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Daregada

2020/12/31 09:23 編集

ええと、外側のdiv要素の内容に含まれる3つのdiv要素のうち、2つめのdiv要素とその内容に関する質問、ということで合ってますかね。
guest

回答1

0

ベストアンサー

CSSのクラス名の付け方が独特で把握するのが大変でした(見た目に基づく命名はやめましょう)が、整理すると、

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <style> 7 .outer { 8 height: 6px; 9 width: 200px; 10 border: green dotted 1px; 11 } 12 13 .inner { 14 height: 6px; 15 width: 30px; 16 border: red solid 1px; 17 display: inline-block; 18 } 19 </style> 20 21 </head> 22 <body> 23 24 <div class="outer"> 25 <div class="inner"></div> 26 <div class="inner"></div> 27 <div class="inner"></div> 28 </div> 29 30 </body> 31</html>

という二重のdiv要素の表示が、以下のようになる原因を知りたい、ということですね。

サンプル

原因は、親(outer)のdiv要素の高さ(6px)が文字サイズに比べて小さすぎるからです。子(innter)のdiv要素の位置の初期値は、親のdiv要素のテキストのベースラインが基準です。親要素に適当なテキストを追加してみると一目瞭然です。

サンプル2

ですから、対策としては、「親のdiv要素(outer)の内容に文字を表示するのであれば、それに見合った高さを設定する」とか、「子のdiv要素(innter)の位置をvertical-align: top;などを使って変更する」といったことになるでしょう。

投稿2020/12/31 09:34

Daregada

総合スコア11990

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

xmg

2021/01/02 09:30

原因を明確に教えてくださり、難題が解決しました。 どうもありがとうございました。 文字をまったく入力していない DIV に、フォントサイズが影響することをこれまで知りませんでした。 これからもご指導をお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問