回答編集履歴
4
修正
answer
CHANGED
|
@@ -53,5 +53,9 @@
|
|
|
53
53
|
position: fixed;
|
|
54
54
|
}
|
|
55
55
|
*/
|
|
56
|
+
```
|
|
56
57
|
|
|
57
|
-
|
|
58
|
+
---
|
|
59
|
+
ちなみに「なぜテキストをいれると縦並びになるか」という疑問に対しては、
|
|
60
|
+
「<div>は標準では`display: block;`なので、縦並びになる」、というのが答えになります。
|
|
61
|
+
(<img>は標準で`display: inline;`なので横並びになります)
|
3
修正
answer
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
以下のように、`<img>`と`<div class="text">`を
|
|
2
2
|
`<div class="bbb">`など、1つの要素でまとめる必要があります。
|
|
3
3
|
|
|
4
|
+
**「画像を横並びに配置してその下にテキストを入れる」**
|
|
5
|
+
というよりも、
|
|
6
|
+
**「画像とテキストのグループを横並びに配置」**
|
|
7
|
+
というほうが、理解しやすいと思います。
|
|
8
|
+
|
|
4
9
|
```HTML
|
|
5
10
|
<div class="aaaa">
|
|
6
11
|
<div class="bbbb">
|
2
修正
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
以下のように、`<img>`と`<div class="text">`を
|
|
2
|
-
`<div>`
|
|
2
|
+
`<div class="bbb">`など、1つの要素でまとめる必要があります。
|
|
3
3
|
|
|
4
4
|
```HTML
|
|
5
5
|
<div class="aaaa">
|
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
</div>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
+
.aaaa、.bbbbなどは、こちらでてきとうにつけた名前なので、好きなクラス名に変更してください。
|
|
36
|
+
|
|
35
37
|
---
|
|
36
38
|
横並びに配置をしたいなら、CSSは以下のような形です。
|
|
37
39
|
```CSS
|
1
修正しました。
answer
CHANGED
|
@@ -39,4 +39,12 @@
|
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-wrap: wrap; /* 横並びにしつつ、改行もしたいなら追加。1列で表示したいなら削除。 */
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
/* 不要なので削除。あらゆるところで"表示崩れ"が発生します。 */
|
|
44
|
+
/*
|
|
45
|
+
div{
|
|
46
|
+
position: fixed;
|
|
47
|
+
}
|
|
48
|
+
*/
|
|
49
|
+
|
|
42
50
|
```
|