display Flex使用時でテキストを上揃え、画像だけを下に揃えで、
テキスト量にかかわらず、常に画像を下にはい位置したいい場合、下記のように記述すると、
実現可能ですが、IEで見たときに画像の下に空白ができてしまう不具合があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
■HTML <ul> <li> <p class="txt">テキストテキストテキスト</p> <p class="img"><img src=""></p> </li> <li> <p class="txt">テキストテキストテキスト</p> <p class="img"><img src=""></p> </li> </ul> ■CSS ul { display: flex; justify-content: space-between; } li { display: flex; flex-direction: column; width: 48%; } .img { margin-top: auto; } |
解決方法は、
画像を囲む親要素に対してmin-height: 0%;を指定してあげることで解決が可能です。
コメント