添付画像のような横並びのリストを作成しています。
「テストテスト…」と書かれているタイトル部分の行数が変わっても
その下にあるタグの上部を揃えたいと思っています。
HTMLは下記のような感じです。
<ul> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテストテストテストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテストテストテストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> </ul>
現時点でのCSSは以下の通りです。
ul { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; margin: 0 -5px; } li { width: calc( (100%/4) - 10px ); margin: 0 5px; } .img img { width: 100%; } h3 { font-size: 18px; margin: 10px 0; } .tag { font-size: 13px; color: #ccc; margin: 0 0 5px; } p { font-size: 14px; margin: 0; }
li要素に高さを指定して、タグとテキスト部分を「position:absolute;」で
配置指定すればいけそうですが、レスポンシブ対応もしなければいけないので、
あまりやりたくない手法です。
もっとスマートなやり方がありましたら、
どうかお教えいただけると幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー