回答編集履歴
3
記述がわかりづらかったため修正
answer
CHANGED
|
@@ -29,8 +29,9 @@
|
|
|
29
29
|
→基準としているrelative要素(.box)のwidthの20%がleftの数値になる（514px*0.2=102.8px）
|
|
30
30
|
|
|
31
31
|
以上により、imgタグの幅が125pxなのに、
|
|
32
|
-
2個目の
|
|
32
|
+
2個目の●のleftの値は102.8pxのため、1個目の●と22.2px被ってしまうことになります。
|
|
33
33
|
|
|
34
|
+
最後に等間隔については、上記のことを踏まえてimgのwidthとID#a,#b,#cのleftを調整すれば実装できます。
|
|
34
35
|
~~~~
|
|
35
36
|
ちなみに個人的にですが、可能であれば
|
|
36
|
-
position: abosoluteを使わずに、flexでimgを横並びにしてimgの左右にmarginをとったほうが
|
|
37
|
+
position: abosoluteを使わずに、flexでimgを横並びにしてimgの左右にmarginをとったほうがわかりやすく等間隔が実現できるかなと思います
|
2
わかりづらかったため追記
answer
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
この回答上部の再現コードを画面幅530pxにしてみた場合の解説
|
|
24
|
-
ID#a,#b,#cのimgの幅は50%に指定されているため、親のaタグの幅の50%となる
|
|
24
|
+
ID#a,#b,#cのimgの幅は50%に指定されているため、親のaタグの幅の50%がimgの幅の数値となる
|
|
25
25
|
→親のaタグはinline要素のためimgの幅の計算に使われず、更にaタグの親のdivタグがimgの幅の計算に使用される。
|
|
26
26
|
→画面幅530pxではdivタグの幅は250px。250pxの50%は125pxのため、imgタグの幅は125pxに決定。(なぜこの状況でdivタグが250pxになるのか？それについてはちょっと説明できないです。すみません)
|
|
27
27
|
|
1
わかりづらかったため追記
answer
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
まず等間隔にすることについては置いておいて、●を重ならないようにすることについて結論から書きます
|
|
5
5
|
|
|
6
6
|
●を重ならないようにするには、画像のwidthを33.333333...%以下にする必要があります。(3つの●を合計して100%以下にする)
|
|
7
|
+
%指定することによって、ウィンドウ幅によってwidthが変わるようになります。
|
|
8
|
+
|
|
7
9
|
質問者さんのコードを踏襲するなら、以下のコードを追加していただくと実現できると思います。
|
|
8
10
|
```css
|
|
9
11
|
#a,#b,#c {
|