クリエイター：コーディング備忘録ブログ

RSS

コーディング

flex-directionを指定した時のIE11で表示くずれ

2018.11.16

display Flex使用時でテキストを上揃え、画像だけを下に揃えで、
テキスト量にかかわらず、常に画像を下にはい位置したいい場合、下記のように記述すると、
実現可能ですが、IEで見たときに画像の下に空白ができてしまう不具合があります。

■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;
}

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%;を指定してあげることで解決が可能です。

この記事を見た人は次の記事も見ています。

Atomエディタの文法チェッカー「W3C Markup Validator」

前の記事

WordPressでの自動挿入ではなくalt属性をキチンと設定する

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

.htaccessを使用したリダイレクト設定

2016.06.27

コーディング

CSSのみで作るドロップダウンメニュー

2017.03.27

コーディング

任意の数ごとに要素で囲い込む方法

2018.12.20

コーディング

新しいフォントを追加する

2021.07.12

コーディング

第六十回「連続する要素のn番目を指定するCSS」

2016.07.27

コーディング

テーブルのセル内で改行させない

2017.07.28