Q&A
前提・実現したいこと
2列に並べたカードがあります。
各カードの中の一番下の要素にリンクがあります。
このリンクの縦位置が隣と揃っていないので、隣同士でリンクの縦位置が低い方に合わせて配置することで、リンクの位置を隣と揃えたいです。
コードを用意しました。
2列カードのコード
テキスト量は可変です。
発生している問題・エラーメッセージ
画像の
該当のソースコード
html
1 <head> 2 <link 3 rel="stylesheet" 4 href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" 5 /> 6 <link rel="stylesheet" href="style.css" /> 7 </head> 8 <body> 9 <ul class="cards"> 10 <li> 11 <div class="img"></div> 12 <p> 13 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 14 </p> 15 <a href="#" class="link"> 16 リンク 17 </a> 18 </li> 19 <li> 20 <div class="img"></div> 21 <p> 22 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 23 </p> 24 <a href="#" class="link"> 25 リンク 26 </a> 27 </li> 28 <li> 29 <div class="img"></div> 30 <p> 31 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 32 </p> 33 <a href="#" class="link"> 34 リンク 35 </a> 36 </li> 37 <li> 38 <div class="img"></div> 39 <p> 40 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 41 </p> 42 <a href="#" class="link"> 43 リンク 44 </a> 45 </li> 46 </ul> 47 </body>
css
1.cards { 2 padding: 1rem; 3 display: flex; 4 flex-wrap: wrap; 5} 6 7.cards li { 8 padding: 0.5rem; 9 border: 1px solid black; 10 width: calc(50% - 0.5rem); 11 margin-bottom: 1rem; 12} 13 14.cards li:nth-of-type(odd) { 15 margin-right: 1rem; 16} 17 18.cards p { 19 margin: 0.5rem 0 1rem; 20 line-height: 1.2; 21} 22 23.img { 24 background: gray; 25 width: calc(50% - 0.5rem); 26 height: 8rem; 27 float: left; 28 margin: 0 0.5rem 0.5rem 0; 29} 30 31.link { 32 background: black; 33 color: white; 34 display: block; 35 padding: 1rem; 36 font-weight: bold; 37 font-size: 1.2rem; 38 text-align: center; 39}
試したこと
liタグにflexを設定し、リンクにmargin-top: auto;を設定することで、リンクの位置を揃えることができました。
しかし、.imgに対するテキストの回り込みがなくなりました。
テキストの回り込みは維持したいです。
回答1件
0
ベストアンサー
画像と回り込みテキストをラップして、li要素をフレックスにして縦方向に配置するのはどうでしょうか。
html
1 <li> 2 <div class="wrapper"> 3 <div class="img"></div> 4 <p> 5 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 6 </p> 7 </div> 8 <a href="#" class="link"> 9 リンク 10 </a> 11 </li>
css
1li { 2 display: flex; 3 flex-direction: column; 4 justify-content: space-between; 5}
投稿2021/12/28 08:46
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。