positionを使って等間隔に素材を置きたい

Question

前提・実現したいこと

この画像のように等間に●を置きたいです。
グレーの背景の素材自体は900pxで●は250pxです。

発生している問題・エラーメッセージ

なぜだか画像がかぶってしまい、どの●も同じ大きさなのに一部の●が大きくなってしまっている。
left:0%;にしてみたのに左端にくっつかないで中途半端な位置にいます。

該当のソースコード

 .box{
   width: 100%;
   position: relative;
   margin:auto auto;

  }

  #a{
    animation: float2 2s ease-in-out infinite;
    position: absolute;
    left:0%;
    top:35%;
    margin:auto auto;
  }
  #b{
    animation: float2 2s 0.2s ease-in-out infinite;
    position: absolute;
    left:20%;
    top:35%;
    margin:auto auto;
  }
  #c{
    animation: float2 2s ease-in-out infinite;
    position: absolute;
    left:50%;
    top:35%;
    margin:auto auto;
  }
  
  #a:hover img{
    transform: scale(1.2,1.2);
  }
  #b:hover img{
    transform: scale(1.2,1.2);
  }
  #c:hover img{
    transform: scale(1.2,1.2);
  }

　　<div class="box">
      <div  class="cf"　><img src=testbg.jpg" alt="" width="100%"></div>
      <div  class="cf" id="a"><a href="#1"><img src="<test.png" alt="" width="50%"></a></div>
      <div  class="cf" id="b"><a href="#2"><img src="<test.png" alt="" width="50%"></a></div>
      <div  class="cf" id="c"><a href="#3"><img src="<test.png" alt="" width="50%"></a></div>
    </div>

試したこと

widthやleftからの位置を調整したのですが変わりませんでした。
パソコンで見るようのコーディングはうまくいったのですが、
スマホように作っているところで表示が崩れてしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yoshinavi]

症状が再現するコードをご提示ください。

[kana0701]

上記のコードでなってしまいます。

[yoshinavi]

誤記述がありますが再現しますか？

[kana0701]

どこが間違っているのか自分ではわからないのですが、記載のコードで二枚目の画像のようになってしまいました。

[x_x]

少なくとも<test.pngは間違いだと思うのですが大丈夫でしょうか？
また、@keyframes float2 も提示してください。

Answer 1

逆に等間隔にならなかったのですが。。。●がくっついてしまう件については、ウィンドウ幅を狭めると再現できました
https://codepen.io/xyuno0717/pen/QzjdaO

まず等間隔にすることについては置いておいて、●を重ならないようにすることについて結論から書きます

●を重ならないようにするには、画像のwidthを33.333333...%以下にする必要があります。(3つの●を合計して100%以下にする)
%指定することによって、ウィンドウ幅によってwidthが変わるようになります。

質問者さんのコードを踏襲するなら、以下のコードを追加していただくと実現できると思います。

#a,#b,#c {
 width: 100%;
}
a {
 width: 100%;
 display: block;
}

imgタグのwidthをすべて33.333333...%以下にする

この回答上部の再現コードを画面幅530pxにしてみた場合の解説
ID#a,#b,#cのimgの幅は50%に指定されているため、親のaタグの幅の50%がimgの幅の数値となる
→親のaタグはinline要素のためimgの幅の計算に使われず、更にaタグの親のdivタグがimgの幅の計算に使用される。
→画面幅530pxではdivタグの幅は250px。250pxの50%は125pxのため、imgタグの幅は125pxに決定。(なぜこの状況でdivタグが250pxになるのか？それについてはちょっと説明できないです。すみません)

ID#b(2個目の●)はleft: 20%の指定
→基準としているrelative要素(.box)のwidthの20%がleftの数値になる（514px*0.2=102.8px）

以上により、imgタグの幅が125pxなのに、
2個目の●のleftの値は102.8pxのため、1個目の●と22.2px被ってしまうことになります。

最後に等間隔については、上記のことを踏まえてimgのwidthとID#a,#b,#cのleftを調整すれば実装できます。

ちなみに個人的にですが、可能であれば
position: abosoluteを使わずに、flexでimgを横並びにしてimgの左右にmarginをとったほうがわかりやすく等間隔が実現できるかなと思います

Comments

[kana0701]

まだ解決していないのですが、おそらく使用しているシステム上の不具合のようでした。
私では思いつかなかった方法を提示してくださってありがとうございました。