実現したいこと
1.下記写真のように、3つのカードの高さを揃えるために、日付の上に余白をつけたい。
2. 写真のアスペクト比を高さ260/横389で維持したい。
↓見本(2枚)
前提
1.日付にmargin-top: auto;を使用したが、効かなかった。
2. 写真のアスペクト比を維持するために.blog-card_thumb &:beforeに
padding-top :calc((260/389)*100%)で設定したが、
写真の上に余白ができてしまった。
発生している問題・エラーメッセージ
現状は以下の写真です。
初歩的でお恥ずかしいですが、宜しくお願い致します。
該当のソースコード
SASS
1/* blog 2------------------------------------------------------ */ 3.blog-card { 4 box-shadow: 0px 3px 6px #00000029; 5 display: flex; 6 flex-direction: column; 7 margin-bottom: 20px; 8 background: #fff; 9} 10.blog-card_thumb { 11 position: relative; 12 overflow: hidden; 13 order: -1; 14 &:before { 15 content: ""; 16 display: block; 17 } 18 >img { 19 position: absolute; 20 left: 0; 21 top: 0; 22 width: 100%; 23 height: 100%; 24 max-width: none; 25 object-fit: cover; 26 transition: 0.5s; 27 } 28} 29.card-body { 30 padding: 15px 30px 15px 15px; 31 span{ 32 margin-top: auto; 33 font-size: clamp(14px,2.8vw,16px); 34 text-align: right; 35 } 36} 37.card-body_text { 38 font-size: clamp(14px,2.8vw,18px); 39 line-height: 1.5; 40 text-align: left; 41} 42/* blog--col2 43------------------------------------------------------ */ 44.blog-cards { 45 display: flex; 46 flex-direction: column; 47 margin-bottom: -20px; 48} 49@include small { 50 .cards--col3 { 51 flex-direction: row; 52 justify-content: space-between; 53 flex-wrap: wrap; 54 } 55 .blog-card { 56 width: calc((100% - 30px)/2); 57 } 58 59} 60 61/* blog--col3 62------------------------------------------------------ */ 63 64@include medium { 65 .blog-card { 66 width: calc((100% - 60px)/3); 67 } 68}
HTML
1<section class="blog _bg"> 2 <div class="section-inner"> 3 <h2 class="section-ttl"> 4 <span class="section-ttl_main">ブログ</span><!-- /.section-ttl_main --> 5 <span class="section-ttl_sub">Blog</span><!-- /.section-ttl_sub --> 6 </h2><!-- /.section-ttl --> 7 <div class="blog-cards cards--col3"> 8 <div class="blog-card"> 9 <div class="card-body"> 10 <p class="card-body_text">サイトをリニューアルオープンしました。</p><!-- /.card-body_text --> 11 <span><time datetime="2020.01.23">2020-01-23</time></span><!-- /.datetime --> 12 </div><!-- /.card-body --> 13 <div class="blog-card_thumb"> 14 <figure><img src="img/austin-distel-wawEfYdpkag-unsplash.png" alt=""></figure> 15 </div><!-- /.blog-card_thumb --> 16 </div><!-- /.blog-card --> 17 <div class="blog-card"> 18 <div class="card-body"> 19 <p class="card-body_text">WebサイトでSEO内部施策に適したコー ディングでどれぐらいサイトが早くなるの か検証してみました</p> 20 <!-- /.card-body_text --> 21 <span><time datetime="2020.01.24">2020-01-24</time></span><!-- /.datetime --> 22 </div><!-- /.card-body --> 23 <div class="blog-card_thumb"> 24 <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure> 25 </div><!-- /.blog-card_thumb --> 26 </div><!-- /.blog-card --> 27 <div class="blog-card"> 28 <div class="card-body"> 29 <p class="card-body_text">ユアコーディングではデザイナーの方を 広く募集しています。</p><!-- /.card-body_text --> 30 <span><time datetime="2020.01.25">2020-01-25</time></span><!-- /.datetime --> 31 </div><!-- /.card-body --> 32 <div class="blog-card_thumb"> 33 <figure><img src="img/brooke-cagle-g1Kr4Ozfoac-unsplash.png" alt=""></figure> 34 </div><!-- /.blog-card_thumb --> 35 </div><!-- /.blog-card --> 36 </div><!-- /.blog-cards cards--col3 --> 37 </div><!-- /.blog-inner --> 38 39 </section><!-- /.blog -->
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/04/08 07:29