質問内容
Contensクラスにdisplay: flex;を指定しています。
子要素であるcontents-leftクラスのwidthを270pxにしてmargin-right: 60px;にしたいのですが、contents-leftクラスのwidthが270pxになりません。
contents-leftの中にimg要素を入れています。
そして、親要素であるcontents-leftを消し、img単体に指定するとwidthもmargin-rightも効きます。
なぜ適切にcontents-leftのwidthが270pxにならないのか、教えていただきたいです。
該当のソースコード
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <title>PHOTO BOOK</title> </head> <body> <div class="container"> <header id="header"> <h1><a href="index.html"><img src="img/logo.svg"></a></h1> </header> <div class="main"> <section id="mainvisual"> <img src="img/mainvisual.jpeg" alt=""> </section> <section id="index"> <div class="inner"> <h2 class="section-title">INDEX</h2> <ol> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> </ol> </div> </section> <section id="detail"> <div class="inner"> <h2 class="section-title">DETAIL</h2> <div class="contents"> <div class="contents-left"> <img src="img/detail.jpeg" alt=""> </div> <div class="contents-right"> <h2>タイトルタイトルタイトル</h2> <dl> <dt>著者</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版年</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年</dt> <dd>タイトルタイトルタイトル</dd> </dl> <P>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</P> <a href="#">オンラインストアで見る</a> </div> </div> </div> </section> </div> </div> <footer> <div class="inner"> <p>© 2020 PHOTO BOOK</p> </div> </footer> </body> </html>
style.css
body { background-color: #f4f9ff; color: #333; font-size: 0.875rem; } .container { max-width: 1000px; margin: 0 auto; } img { max-width: 100%; } .section-title { font-size: 1.125rem; font-weight: bold; margin-bottom: 10px; } #header { margin-top: 60px; } #header h1 { width: 160px; line-height: 1px; margin-bottom: 15px; } #mainvisual { margin-bottom: 60px; } #index { background-color: #fff; padding: 30px 0; margin-bottom: 60px; } #index li { margin-bottom: 20px; } .inner { background-color: pink; max-width: 600px; margin: 0 auto; } .inner ol { margin-left: 20px; } .contents { display: flex; /* justify-content: space-between; */ align-items: flex-start; } .contents-left { width: 270px; background-color: aqua; margin-right: 60px; } /* .contents img { width: 270px; margin-right: 60px } */ .contents-right h2 { margin-bottom: 20px; font-size: 18px; } .contents-right dl { display: flex; flex-wrap: wrap; padding: 16px 0; border-top: solid 1px #dedede; border-bottom: solid 1px #dedede; margin-bottom: 25px; } .contents-right dt { width: 25%; } .contents-right dd { width: 75%; } .contents-right p { margin-bottom: 20px; } .contents-right a { color: #333; } footer { font-size: 0.625rem; padding: 15px 0; }
0 コメント