ID非公開
ID非公開さん
2022/1/17 18:11
2回答
CSSについての質問です。
CSSについての質問です。 こちらのサイト https://eclair.blog/make-card-group-with-html-and-css/#CodePen の画像を3列にしたいのですが、レイアウトが崩れて小さくなってしまい、上手くいきません。 フルスクリーン時、各ブロックの大きさはそのままで、余白を少なくして3列表示にしていただくことは可能でしょうか。 また、Webページを縮小した際に、2列、1列とレスポンシブに切り替えることができると嬉しいです。 お手数をおかけしますが、どうぞよろしくお願い致します。
ベストアンサー
ID非公開さん >････Webページを縮小した際に、2列、1列とレスポンシブに切り替える･･････ そのページの3列のタグは間違っているようですね。 ご参考に↓ <!DOCTYPE html> <html lang="en"> <head> <style> .card-group{ margin-left: auto; margin-right: auto; max-width: 960px; /* 修正 */ width: 90%; height: auto; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } .card{ width:300px; /* 修正 */ margin: 0 20px 20px 0;/* 追加 */ height: auto; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,.2) } .card__imgframe{ width: 100%; height: auto; padding-top: 56.25%; background: #bbb; box-sizing: border-box; } .card__textbox{ width: 100%; height: auto; padding: 20px 18px; background: #fff; box-sizing: border-box; } .card__textbox > * + *{ margin-top: 10px; } .card__titletext{ font-size: 20px; font-weight: bold; line-height: 125%; } .card__overviewtext{ font-size: 12px; line-height: 150%; } </style> </head> <body> <div class="card-group"> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> <div class="card"> <div class="card__imgframe"></div> <div class="card__textbox"> <div class="card__titletext"> タイトルがはいります。タイトルがはいります。 </div> <div class="card__overviewtext"> 概要がはいります。概要がはいります。概要がはいります。概要がはいります。 </div> </div> </div> </div> </body> </html>
質問者からのお礼コメント
大変参考になります。 ご回答ありがとうございました。
お礼日時：1/18 0:11
