Q&A
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- カード型のレイアウトを整えたい
前提
カード型のレイアウトを作ってます。
発生している問題・エラーメッセージ
値段と薬の説明のところのflex-growがうまく効かなくて高さが合わない
該当のソースコード
HTML
1 <div class="left"> 2 <h5 class="highlighter yokuseizai_title">生物学的製剤</h5> 3 <img src="../assets/images/new_med.jpg" alt="新薬のイメージ"> 4 </div> 5 <div class="am_flex"> 6 <div class="medicine"> 7 <img src="../assets/images/benrista.webp" alt="ベンリスタの写真" class="medicine_img"> 8 <div class="medicine_center"> 9 <p class="medicine_kind">生物学的製剤</p> 10 <p>Belimumab<br><span class="medicine_name">ベンリスタ</span></p> 11 </div> 12 <div class="medicine_text_box"> 13 <p class="medicine_text">SLEの治療に使用される抗体医薬品で、Bリンパ球刺激因子(BLyS)を標的とします。注射薬。</p> 14 <p class="price">16,616円/120mg1瓶</p> 15 </div> 16 </div> 17 18 <div class="medicine"> 19 <img src="../assets/images/sanefro.webp" alt="サフネローの写真" class="medicine_img"> 20 <div class="medicine_center"> 21 <p class="medicine_kind">生物学的製剤</p> 22 <p>Secukinumab<br><span class="medicine_name">サフネロー</span></p> 23 </div> 24 <div class="medicine_text_box"> 25 <p class="medicine_text">膿痂疹の治療に使用されることが一般的ですが、腎炎を伴うSLEの治療に特に効果があります。</p> 26 <p class="price">300mg2ml1瓶<br>96,068円 27 </p> 28 </div> 29 </div> 30 31 <div class="medicine"> 32 <img src="../assets/images/ritukisimab.webp" alt="リツキシマブの写真" class="medicine_img"> 33 <div class="medicine_center"> 34 <p class="medicine_kind">生物学的製剤</p> 35 <p>Rituximab<br><span class="medicine_name">リツキシマブ</span></p> 36 </div> 37 <div class="medicine_text_box"> 38 <p class="medicine_text">SLEの治療に使用されるモノクローナル抗体医薬品で、B細胞を標的とします。注射薬。</p> 39 <p class="price">21,609円<br>100mg10ml1瓶</p> 40 </div> 41 </div> 42 <div class="medicine"> 43 <img src="../assets/images/akutemura.webp" alt="アクテムラの写真" class="medicine_img"> 44 <div class="medicine_center"> 45 <p class="medicine_kind">生物学的製剤</p> 46 <p><span class="medicine_name">アクテムラ</span></p> 47 </div> 48 <div class="medicine_text_box"> 49 <p class="medicine_text">注射薬。炎症を抑制する、細胞障害を抑制、病気の進行を遅らせる</p> 50 <p class="price">32608円/キット</p> 51 </div> 52 </div> 53 </div> 54
CSS
1.am_flex { 2 display: flex; 3 justify-content: start; 4 flex-wrap: wrap; 5 gap: 2%; 6} 7.medicine { 8 display: flex; 9 flex-direction: column; 10 width: 23%; 11 margin-bottom: 25px; 12} 13.medicine_img { 14 width: 100%; 15 height: 200px; 16 border-radius: 20px 20px 0 0; 17} 18.medicine_center { 19 background-color: #E2B2A9; 20 padding: 10px; 21 width: 100%; 22 height: 120px; 23} 24.medicine_kind { 25 margin: 0; 26} 27.medicine_name { 28 font-weight: bold; 29 font-size: 18px; 30} 31.medicine_text_box { 32 padding: 10px; 33 height: 200px; 34 display: flex; 35 flex-direction: column; 36 border: 3px solid #E2B2A9; 37 border-radius: 0 0 20px 20px; 38} 39.medicine_text { 40 text-align: left; 41 flex-grow: 3; 42} 43.price { 44 margin: 0; 45 flex-grow: 1; 46}
試したこと
medicine_text_boxにdisplay:flexを指定して
medicine_textと.priceにflex-growを指定した。
回答3件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。