回答編集履歴

4

修正

2020/04/30 22:39

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -108,6 +108,14 @@
108
108
 
109
109
  */
110
110
 
111
+ ```
111
112
 
112
113
 
114
+
113
- ```
115
+ ---
116
+
117
+ ちなみに「なぜテキストをいれると縦並びになるか」という疑問に対しては、
118
+
119
+ 「<div>は標準では`display: block;`なので、縦並びになる」、というのが答えになります。
120
+
121
+ (<img>は標準で`display: inline;`なので横並びになります)

3

修正

2020/04/30 22:39

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,6 +1,16 @@
1
1
  以下のように、`<img>`と`<div class="text">`を
2
2
 
3
3
  `<div class="bbb">`など、1つの要素でまとめる必要があります。
4
+
5
+
6
+
7
+ **「画像を横並びに配置してその下にテキストを入れる」**
8
+
9
+ というよりも、
10
+
11
+ **「画像とテキストのグループを横並びに配置」**
12
+
13
+ というほうが、理解しやすいと思います。
4
14
 
5
15
 
6
16
 

2

修正

2020/04/30 22:34

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,6 +1,6 @@
1
1
  以下のように、`<img>`と`<div class="text">`を
2
2
 
3
- `<div>`や`<li>`など、要素でまとめる必要があります。
3
+ `<div class="bbb">`など、1つの要素でまとめる必要があります。
4
4
 
5
5
 
6
6
 
@@ -66,6 +66,10 @@
66
66
 
67
67
 
68
68
 
69
+ .aaaa、.bbbbなどは、こちらでてきとうにつけた名前なので、好きなクラス名に変更してください。
70
+
71
+
72
+
69
73
  ---
70
74
 
71
75
  横並びに配置をしたいなら、CSSは以下のような形です。

1

修正しました。

2020/04/30 22:31

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -80,4 +80,20 @@
80
80
 
81
81
  }
82
82
 
83
+
84
+
85
+ /* 不要なので削除。あらゆるところで"表示崩れ"が発生します。 */
86
+
87
+ /*
88
+
89
+ div{
90
+
91
+ position: fixed;
92
+
93
+ }
94
+
95
+ */
96
+
97
+
98
+
83
99
  ```