前提・実現したいこと
こんにちはプログラミング学習を始めて一か月のものです。
ページの模写をしているのですが思い道理にいかなくて困っています。
発生している問題・エラーメッセージ
発生している問題 florisutとFor yourselfとの間で余分な余白ができてしまっている。
該当のソースコード
<section class="work"> <div class="common-inner"> <h2 class="section-title">Work</h2> <p class="section-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br> ウェディングやイベントの装花なども行なっています。<br> 一人一人にあったご提案をさせていただきます。</p> <div class="work-list"> <div class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_gift.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Gift</h3> <p class="work-block__text">花束をお送りしたいお相手、伝えたいお気持ちに合わせた <br> プレゼント用花束のアレンジメントをさせていただきま。花言葉などの豆知識もお伝えします。</p> </div> </div> <div class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_wedding.png" alt=""><p> <div class="work-block__wrapper"> <h3 class="work-block__title">Wedding</h3> <p class="work-block__text">ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p> </div> </div> <div id="photo" class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_decoretion.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Decoration</h3> <p class="work-block__text">お写真を彩るお花を一輪から販売。<br> 一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p> </div> </div> <div class="work-list__block work-block"> <p class="work-block__image"><img src="C:\Users\Web 1280 – 1/work_for_yourself.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">For yourself</h3> <p class="work-block__text">お部屋の雰囲気やライフスタイルをお聞きしてご自宅用の 花束をご提案し、少しでも長く咲かせるコツもお教えします 。花束に合った花瓶をご提案することも可能です。</p> </div> </div> </div> </div> </section> <section class="florist"> <div class="common-inner"> <h2 class="section-title">Florist</h2> <p class="section-text">Shiro専属のフローリストたちをご紹介。<br> 得意の分野であなたのオーダーを最大限に叶えます。</p> <div class="florist-list"> <div class="florist-list__item florist-block"> <p><img src="C:\Users\Web 1280 – 1/florist_shiyu.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Shiyu</h3> <p class="work-block__text">お花茶屋大学フラワーアレンジメント科を卒業後、さまざまな白い花を探すために世界を一周し、Shiroの創業者となる。</p> </div> </div> <div class="florist-list__item florist-block"> <p><img src="C:\Users\Web 1280 – 1/florist_mao.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Mao</h3> <p class="work-block__text">花の魅力に惹かれ、空間デザインの世界からフローリストの道を歩む。主に結婚式やイベントで使用するお花のディレクション担当。</p> </div> </div> <div class="florist-list__item florist-block"> <p><img src="C:\Users\Web 1280 – 1/florist_omichan.png" alt=""></p> <div class="work-block__wrapper"> <h3 class="work-block__title">Omichan</h3> <p class="work-block__text">フローリスト兼ガーデナーという特殊な経歴をもつ。豊富な知識と技術でお客様のオーダーを叶える。</p> </div> </div> </div> </div> </section> </body> </html>
css
1 2@charset "UTF-8"; 3 4*, *::before, *::after { 5 box-sizing: border-box; 6 margin: 0; 7 padding: 0; 8} 9body { 10 margin: 0; 11 font-family: sans-serif; 12 font-size: 16px; 13 color: #2b2b2b; 14} 15 16h1, h2, h3, p { 17 margin: 0; 18 padding: 0; 19} 20 21a { 22 color: #2b2b2b; 23 text-decoration: none; 24} 25 26section { 27 text-align: center; 28} 29 30 31 32.common-inner{ 33 padding: 80px 0; 34 max-width: 960px; 35 margin: 0 auto; 36} 37 38 39 40 41 42.work-list{ 43 display: flex; 44 flex-direction: column; 45 flex-wrap: wrap; 46 align-content: space-between; 47 height: 1680px; 48 max-width: 960px; 49 50} 51 52.work-block{ 53 width: 420px; 54} 55 56 57 58.work-block:not(:last-child){ 59 padding-bottom: 80px; 60} 61 62#photo { 63 padding-top:120px ; 64 65} 66 67.work-block__wrapper{ 68 padding-top:16px ; 69 text-align: left; 70 71 72} 73 74.work-block__title{ 75 font-size: 24px; 76 line-height: 1.0; 77} 78 79.work-block__text{ 80 padding-top: 5px; 81 font-size: 16px; 82 line-height: 1.75; 83} 84 85.florist{ 86 background: linear-gradient(white 50%, #ededed 50%); 87 width: 100%; 88 89 90} 91 92.florist-list{ 93 display: flex; 94 width: 100%; 95} 96 97 98 99 100 101 102 103 104
試したこと
問題一つ目で試したこと
いろいろなところのpaddinngやmarginをいじったが解決しなかった。
問題二つ目で試したこと
親要素にdisplay:flex;したが横並びにならなかった。
一応子要素にもやってみたが解決しなかった。
補足情報(FW/ツールのバージョンなど)
なし
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/01 01:48