画像のサイズ指定と、widthの設定

添付画像のように、サイズ指定した3つのdesignを、designs要素（container要素?）中で
均一に隙間を作って並べたいのですが、ぴったり揃ってしまいます・・・

HTML
1      <div class="designs">
2        <div class="design">
3          <a href="#"><img src="portfolio_images/paspol.png"></a>
4        </div>
5
6        <div class="design">
7            <a href="#"><img src="portfolio_images/paspol.png"></a>
8        </div>
9
10        <div class="design">
11            <a href="#"><img src="portfolio_images/paspol.png"></a>
12        </div>
13
14      </div>

CSS
1.container {
2  width: 968px;
3  margin: 0 auto;
4}
5
6.designs{
7  width: 100%;
8}
9
10.design{
11  float: left;
12  width:300px;
13  height:200px;
14}
15
16.design a img{
17  width:100%;
18}
19

行動規範の内容に同意します

回答2件

Daregadaさんのいうとおり、display: flex;を使ったほうがいいと思うのでそちらを参考にしてください。

ただfloat: left;を使用が必須だったり、
既存のCSSを活かそうとしたら、私なら以下のようにします。

↓「追加」に書いた10pxは余白です。好きな値を指定してください。

CSS
1.container {
2  width: 968px;
3  margin: 0 auto;
4}
5
6.designs {
7  width: 100%;
8  
9  /* 追加 */
10  margin: -10px;
11}
12
13.design {
14  float: left;
15  /* width: 300px; */
16  height: 200px;
17  
18  /* 追加 */
19  margin: 10px;
20  width: calc((100% / 3) - (10px * 2));
21}
22
23.design a img {
24  width: 100%;
25}

(「10px」の数字が.containerの左右の余白を上回ると横方向のスクロールが生じる場合もあるので、その場合はbodyに「overflow-x: hidden;」などを指定してください。)

投稿2020/08/02 07:38

編集2020/08/02 07:43

new1ro

総合スコア4528

ベストアンサー

float縛りでなければ、こんな感じで。

CSS
1.designs {
2  width: 100%;
3  display: flex;
4  justify-content: space-between;
5}
6
7.design {
8  /*  float: left;*/
9  width: 300px;
10  height: 200px;
11}
12
13.design a img {
14  width: 100%;
15}