前提・実現したいこと
liに画像とテキストを入れて、横3列に均等に並べたいです。
テキストが入っている.boxに背景色をつけたいです。
レスポンシブにも対応させたいです。
発生している問題
テキストの文字数がバラバラの為、高さが揃わなく、.boxに背景色をつけてもガタガタになってしまいます。
レスポンシブに対応させたい為、liの中に画像とテキストを入れてます。
HTML
1<ul class="main"> 2 <li> 3 <img src="images/sample01.jpg" alt=""> 4 <div class="box"> 5 <p>texttexttexttexttexttexttexttexttexttexttext</p> 6 </div> 7 </li> 8 <li> 9 <img src="images/sample02.jpg" alt=""> 10 <div class="box"> 11 <p>texttexttexttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 12 </div> 13 </li> 14 <li> 15 <img src="images/sample03.jpg" alt=""> 16 <div class="box"> 17 <p>texttexttexttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 18 </div> 19 </li> 20</ul>
CSS
1.main{ 2 display: flex; 3 justify-content: space-between; 4} 5.main li{ 6 width: calc(33.33333% - 10px); 7} 8.box{ 9 background: #f5f1c8; 10} 11 12
HTMLの記述の仕方も間違っているのかもしれないのですが、
色々試して見てもテキスト部分に高さをもたせて揃える事ができずにいます。
最終的にはレスポンシブ対応させた際にli部分を下に落としてスマホでは一列にしようとしています。
初心者の為、詳しく教えていただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/28 14:14
2018/06/28 14:44
退会済みユーザー
2018/06/28 16:50