質問編集履歴

2

追記

2020/02/13 07:30

投稿

tomtom1
tomtom1

スコア168

test CHANGED
File without changes
test CHANGED
@@ -197,3 +197,7 @@
197
197
  当初存在した.boxにheight:200px;を指定すると、赤い箱はちゃんと左上に配置されました。
198
198
 
199
199
  **高さを完全に子要素に設定(子要素がない場合は高さ0)しつつ、箱を左上(通常の配置先)に置くには何が足りないでしょうか**
200
+
201
+ ※タブのcssを少々変えています。
202
+
203
+ ※boxなどのwidth:400px; と指定された要素の全てをwidht:100%;に変えております。

1

追記

2020/02/13 07:30

投稿

tomtom1
tomtom1

スコア168

test CHANGED
File without changes
test CHANGED
@@ -137,3 +137,63 @@
137
137
  ```
138
138
 
139
139
  お分かりの方、ぜひご教示宜しくお願いします。
140
+
141
+ ###追記
142
+
143
+ **hatena19さんにご教示頂き、非常に答えに近くことができました。ありがとうございます。**
144
+
145
+ さて、子要素の高さに合わせたい理由から、.boxのheight:0;に変更しました。
146
+
147
+ すると、要素がないため、boxが消す(高さが0になった)ことができました。
148
+
149
+ そこで、タブ1boxにハコを1つ、タブ2boxにハコを2つ、子要素を加えて確かめました。
150
+
151
+ ```html
152
+
153
+ <div id="first" class="box">
154
+
155
+ <div class="box-red"></div>
156
+
157
+ </div>
158
+
159
+ <div id="second" class="box">
160
+
161
+ <div class="box-blue"></div>
162
+
163
+ <div class="box-blue"></div>
164
+
165
+ </div>
166
+
167
+ ```
168
+
169
+ ```css
170
+
171
+ .box-red{
172
+
173
+ width:100px;
174
+
175
+ height:100px;
176
+
177
+ background-color:red;
178
+
179
+ }
180
+
181
+ .box-blue{
182
+
183
+ width:100px;
184
+
185
+ height:100px;
186
+
187
+ background-color:blue;
188
+
189
+ }
190
+
191
+ ```
192
+
193
+ ![イメージ説明](d05d4c439a33463859a09fde5fe809f7.png)
194
+
195
+ すると、高さが子要素に合わせて設定されるのですが、要素が左下詰めに配置されてしまいます。
196
+
197
+ 当初存在した.boxにheight:200px;を指定すると、赤い箱はちゃんと左上に配置されました。
198
+
199
+ **高さを完全に子要素に設定(子要素がない場合は高さ0)しつつ、箱を左上(通常の配置先)に置くには何が足りないでしょうか**