質問編集履歴
1
詳しく書き直しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
position
|
|
1
|
+
positionを使って等間隔に素材を置きたい
|
body
CHANGED
|
@@ -2,13 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
この画像のように等間に●を置きたいです。
|
|
5
|
+
グレーの背景の素材自体は900pxで●は250pxです。
|
|
5
6
|
### 発生している問題・エラーメッセージ
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
なぜだか画像がかぶってしまい、どの●も同じ大きさなのに一部の●が大きくなってしまっている。
|
|
11
|
+
left:0%;にしてみたのに左端にくっつかないで中途半端な位置にいます。
|
|
10
12
|
### 該当のソースコード
|
|
11
13
|
```css
|
|
14
|
+
.box{
|
|
15
|
+
width: 100%;
|
|
16
|
+
position: relative;
|
|
17
|
+
margin:auto auto;
|
|
18
|
+
|
|
19
|
+
}
|
|
20
|
+
|
|
12
21
|
#a{
|
|
13
22
|
animation: float2 2s ease-in-out infinite;
|
|
14
23
|
position: absolute;
|
|
@@ -42,10 +51,12 @@
|
|
|
42
51
|
}
|
|
43
52
|
```
|
|
44
53
|
```html
|
|
54
|
+
<div class="box">
|
|
55
|
+
<div class="cf" ><img src=testbg.jpg" alt="" width="100%"></div>
|
|
45
56
|
<div class="cf" id="a"><a href="#1"><img src="<test.png" alt="" width="50%"></a></div>
|
|
46
57
|
<div class="cf" id="b"><a href="#2"><img src="<test.png" alt="" width="50%"></a></div>
|
|
47
58
|
<div class="cf" id="c"><a href="#3"><img src="<test.png" alt="" width="50%"></a></div>
|
|
48
|
-
|
|
59
|
+
</div>
|
|
49
60
|
```
|
|
50
61
|
### 試したこと
|
|
51
62
|
widthやleftからの位置を調整したのですが変わりませんでした。
|