Q&Ahtml
1<!DOCTYPE html> 2<html lang ="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>slot</title> 6 <link rel="stylesheet" src="css/styles.css"> 7 </head> 8 9 10 <body> 11 <div id="container"> 12 13 <div id="A"> 14 <img src="./img/bell.png" class="a" width="120px" height="150px"> 15 <p>STOP</p> 16 </div> 17 18 <div id="B"> 19 <img src="./img/cherry.png" class="a" width="120px" height="150px"> 20 <p>STOP</p> 21 </div> 22 23 <div id="C"> 24 <img src="./img/seven.png" class="a" width="120px" height="150px"> 25 <p>STOP</p> 26 </div> 27 28 29 30 </div> 31 32 <script type="text/javascript" src="script.js"></script> 33 </body>
css
1#container{ 2 display: flex; 3} 4 5p{ 6 display:block; 7 width: 200px; 8 height:200px; 9} 10 11#A{ 12 width: 200px; 13 height:200px; 14}
このようにすることで＃Ａ ＃Ｂ ＃Ｃのwidthを狭くして、＃container内のflexで横並びにしたいのですが＃Ａのwidthが効きません。
なぜなのでしょうか。
回答3件
0
- cssファイルをstyles.css以外にしてるとか
- idじゃなくてクラスにしたら?
投稿2019/12/15 11:05
編集2019/12/15 11:08
総合スコア427
0
自己解決
css link が hrefではなくsrcにしていました。
とても初歩的なミスでお恥ずかしい限りです。
taiyaixさん、回答ありがとうございました。
投稿2019/12/15 11:27
総合スコア33
0
pのwidthを200pxにしているので、#Aのwidthを200px以下にしても反映されないのだと思います。
CSS
1 2p{ 3 display:block; 4 width: 100px; 5 height:200px; 6}
試しにpのwidthを100pxにしてみてください。#Bと#Cの幅が狭まり、#Aのみwidth:200pxが効いているのがわかると思います。
投稿2019/12/15 11:17
編集2019/12/15 11:20
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。