お世話になります。
横並びにした li要素の中に、テキストその下に画像を1枚載せています。
テキストの文字数がバラバラなので自動で高さを揃えています。
その際、liの自体の高さは揃っているのですが、li要素の中の画像は上部の文字数によって、揃わないです。
例えば、上のテキストが2行になってしまったとき、画像横一列同じ高さに揃えることは可能でしょうか?
レスポンシブにしたいので、テキスト画像の順番で載せたいです。
アドバイスいただければ幸いです。
宜しくお願いいたします。
css
1ul { 2 clear: both; 3 display: -webkit-box; 4 display: -moz-box; 5 display: -ms-box; 6 height: 100%; 7 display: -webkit-flexbox; 8 display: -moz-flexbox; 9 display: -ms-flexbox; 10 display: -webkit-flex; 11 display: -moz-flex; 12 display: -ms-flex; 13 display: flex; 14 -webkit-box-lines: multiple; 15 -moz-box-lines: multiple; 16 -webkit-flex-wrap: wrap; 17 -moz-flex-wrap: wrap; 18 -ms-flex-wrap: wrap; 19 flex-wrap: wrap; 20 overflow: hidden; 21} 22 23 li { 24 width: 30%; 25 height: 100%; 26 margin-right: 4.5%; 27 float: left; 28 margin-top: 3%; 29} 30
html
1 2<ul> 3<li> 4<span>テキストが入ります。テキストが入ります。テキストが入ります。</span> 5<img src="img.jpg" alt="" > 6</li> 7<li> 8<span>テキストが入ります。テキストが入ります。</span> 9<img src="img.jpg" alt="" > 10</li> 11<li> 12<span>テキストが入ります。</span> 13<img src="img.jpg" alt="" > 14</li> 15</ul>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/16 07:57
2017/01/16 08:17