回答編集履歴

4

追記

2019/07/02 14:18

投稿

yoshinavi
yoshinavi

スコア3523

test CHANGED
@@ -66,8 +66,6 @@
66
66
 
67
67
  display: inline-block;
68
68
 
69
- width: 330px;
70
-
71
69
  border: solid 1px #000; /* ← 分かりやすく枠線を付けています。 */
72
70
 
73
71
  }
@@ -93,3 +91,7 @@
93
91
  HTMLに余分な空白が含まれているので、削除してください。
94
92
 
95
93
  HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。
94
+
95
+
96
+
97
+ ※余分なコードがあったので修正しました。(^^;)

3

追記

2019/07/02 14:18

投稿

yoshinavi
yoshinavi

スコア3523

test CHANGED
@@ -88,6 +88,8 @@
88
88
 
89
89
  ```
90
90
 
91
+ `position`関連は、全て削除してください。
92
+
91
93
  HTMLに余分な空白が含まれているので、削除してください。
92
94
 
93
95
  HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。

2

追記

2019/07/02 13:47

投稿

yoshinavi
yoshinavi

スコア3523

test CHANGED
@@ -7,3 +7,87 @@
7
7
  -追記-
8
8
 
9
9
  表現を一部、修正しました。
10
+
11
+
12
+
13
+ ---
14
+
15
+ 「yambejp」さんと、ほぼ同じで、該当箇所のみです。
16
+
17
+
18
+
19
+ ```CSS
20
+
21
+ .space-full {
22
+
23
+ background-color: powderblue; /* ← 分かりやすく色を付けています。 */
24
+
25
+ }
26
+
27
+
28
+
29
+ .space-top3 {
30
+
31
+ /* 設定削除 */
32
+
33
+ }
34
+
35
+
36
+
37
+ .space-top3-2 {
38
+
39
+ text-align: center;
40
+
41
+ }
42
+
43
+
44
+
45
+ .space-top3 h2 {
46
+
47
+ font-size:32px;
48
+
49
+ font-weight:bold;
50
+
51
+ font-style:solid;
52
+
53
+ text-align:center;
54
+
55
+ }
56
+
57
+
58
+
59
+ .mail,
60
+
61
+ .watch,
62
+
63
+ .earth {
64
+
65
+ box-sizing: border-box;
66
+
67
+ display: inline-block;
68
+
69
+ width: 330px;
70
+
71
+ border: solid 1px #000; /* ← 分かりやすく枠線を付けています。 */
72
+
73
+ }
74
+
75
+
76
+
77
+ .mail p,
78
+
79
+ .watch p,
80
+
81
+ .earth p {
82
+
83
+ width: 330px;
84
+
85
+ text-align: left;
86
+
87
+ }
88
+
89
+ ```
90
+
91
+ HTMLに余分な空白が含まれているので、削除してください。
92
+
93
+ HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。

1

追記

2019/07/02 13:45

投稿

yoshinavi
yoshinavi

スコア3523

test CHANGED
@@ -1,3 +1,9 @@
1
1
  崩れる理由:
2
2
 
3
- 提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てが`position:absolute;`されているので、**親要素の高さが「0(ゼロ)」**のため、CSSが適用されせん
3
+ 提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てが`position:absolute;`されているので、**親要素の高さが「0(ゼロ)」**のため、親要素からハミ出してま
4
+
5
+
6
+
7
+ -追記-
8
+
9
+ 表現を一部、修正しました。