回答編集履歴
1
書式の改善
answer
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
通常のフローと要素がHTMLで記述した順に左から右、上らか下に順番に配置されることですが、`position: absolute;`の要素はそれから外れて浮いた状態になります。ですので、その下の要素が上に移動してしまいます。
|
|
5
5
|
|
|
6
6
|
まずは、`position: absolute;`による位置決めはやめましょう。
|
|
7
|
-
あと、左右配置も float: left; float: right; を使うのをやめましょう。
|
|
7
|
+
あと、左右配置も `float: left;` `float: right;` を使うのをやめましょう。
|
|
8
8
|
これも後の要素が回り込んできますので、レイアウトのくずれの原因になります。
|
|
9
9
|
|
|
10
|
-
上の方の .contents > .container では display: flex; でレイアウトしていますので、それと同様に
|
|
10
|
+
上の方の `.contents > .container` では `display: flex;` でレイアウトしていますので、それと同様に
|
|
11
|
-
point-wrapper > .container も display: flex; でレイアウトを決めるようにすることをお勧めします。
|
|
11
|
+
`point-wrapper > .container` も `display: flex;` でレイアウトを決めるようにすることをお勧めします。
|
|
12
12
|
|
|
13
13
|
下記辺りを参考に学習してください。
|
|
14
14
|
|