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

問題点

以下のコードを実行すると、２行目の　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 (緑色)　の中に納まらずに
桁ずれを起こしてしまうのか、原因を教えていただけますでしょうか。

Daregada

2020/12/31 09:23 編集

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

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

回答1件

ベストアンサー

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>