回答編集履歴
3
記述がわかりづらかったため修正
test
CHANGED
|
@@ -60,12 +60,14 @@
|
|
|
60
60
|
|
|
61
61
|
以上により、imgタグの幅が125pxなのに、
|
|
62
62
|
|
|
63
|
-
2個目の
|
|
63
|
+
2個目の●のleftの値は102.8pxのため、1個目の●と22.2px被ってしまうことになります。
|
|
64
64
|
|
|
65
65
|
|
|
66
|
+
|
|
67
|
+
最後に等間隔については、上記のことを踏まえてimgのwidthとID#a,#b,#cのleftを調整すれば実装できます。
|
|
66
68
|
|
|
67
69
|
~~~~
|
|
68
70
|
|
|
69
71
|
ちなみに個人的にですが、可能であれば
|
|
70
72
|
|
|
71
|
-
position: abosoluteを使わずに、flexでimgを横並びにしてimgの左右にmarginをとったほうが
|
|
73
|
+
position: abosoluteを使わずに、flexでimgを横並びにしてimgの左右にmarginをとったほうがわかりやすく等間隔が実現できるかなと思います
|
2
わかりづらかったため追記
test
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
この回答上部の再現コードを画面幅530pxにしてみた場合の解説
|
|
46
46
|
|
|
47
|
-
ID#a,#b,#cのimgの幅は50%に指定されているため、親のaタグの幅の50%となる
|
|
47
|
+
ID#a,#b,#cのimgの幅は50%に指定されているため、親のaタグの幅の50%がimgの幅の数値となる
|
|
48
48
|
|
|
49
49
|
→親のaタグはinline要素のためimgの幅の計算に使われず、更にaタグの親のdivタグがimgの幅の計算に使用される。
|
|
50
50
|
|
1
わかりづらかったため追記
test
CHANGED
|
@@ -9,6 +9,10 @@
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
●を重ならないようにするには、画像のwidthを33.333333...%以下にする必要があります。(3つの●を合計して100%以下にする)
|
|
12
|
+
|
|
13
|
+
%指定することによって、ウィンドウ幅によってwidthが変わるようになります。
|
|
14
|
+
|
|
15
|
+
|
|
12
16
|
|
|
13
17
|
質問者さんのコードを踏襲するなら、以下のコードを追加していただくと実現できると思います。
|
|
14
18
|
|