margin-top:auto;
を指定しても効かないです。どなたかお助け願います。
HTML
1<section> 2 <div class="box-contents"> 3 <div> 4 <img src="img/3213585_m.jpg" alt=""> 5 </div> 6 <h1>テスト見出し</h1> 7 <p>テストテストテストテストテスト</p> 8 <p class="top">【続きを読む】</p> 9 </div> 10 <div> 11 <div class="box-contents"> 12 <img src="img/3213585_m.jpg" alt=""> 13 </div> 14 <h1>テスト見出し</h1> 15 <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p> 16 <p class="top">【続きを読む】</p> 17 </div> 18 <div> 19 <div class="box-contents"> 20 <img src="img/3213585_m.jpg" alt=""> 21 </div> 22 <h1>テスト見出し</h1> 23 <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p> 24 <p class="top">【続きを読む】</p> 25 </div> 26 </section>
CSS
1body { 2 width: 90%; 3 margin: 0 auto; 4} 5 6section { 7 display: flex; 8 justify-content: space-between; 9 gap: 0 20px; 10} 11section img { 12 width: 100%; 13 height: auto; 14 object-fit: cover; 15 aspect-ratio: 4/3; 16} 17.box-contents { 18 display: flex; 19 flex-direction: column; 20} 21.top{ 22 margin-top: auto; 23} 24
続きを読む の部分を一番下にauto等で下げたいです。
回答1件
あなたの回答
tips
プレビュー