回答編集履歴
1
追記
answer
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
Daregadaさんのいうとおり、`display: flex;`を使ったほうがいいと思うのでそちらを参考にしてください。
|
|
2
2
|
|
|
3
|
+
ただfloat: left;を使用が必須だったり、
|
|
3
|
-
既存のCSSを活かした
|
|
4
|
+
既存のCSSを活かそうとしたら、私なら以下のようにします。
|
|
4
5
|
|
|
6
|
+
↓「追加」に書いた10pxは余白です。好きな値を指定してください。
|
|
7
|
+
|
|
5
8
|
```CSS
|
|
6
9
|
.container {
|
|
7
10
|
width: 968px;
|
|
@@ -22,11 +25,11 @@
|
|
|
22
25
|
|
|
23
26
|
/* 追加 */
|
|
24
27
|
margin: 10px;
|
|
25
|
-
width: calc(100% / 3 - 10px
|
|
28
|
+
width: calc((100% / 3) - (10px * 2));
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
.design a img {
|
|
29
32
|
width: 100%;
|
|
30
33
|
}
|
|
31
|
-
|
|
32
|
-
```
|
|
34
|
+
```
|
|
35
|
+
(「10px」の数字が.containerの左右の余白を上回ると横方向のスクロールが生じる場合もあるので、その場合はbodyに「overflow-x: hidden;」などを指定してください。)
|