サイズの異なる画像を複数段並べたときに、上端を揃えるようにしたい

いつもお世話になっています。
htmlでの画像の表示に関してお伺いしたいことがあり、投稿致しました。

サイズの異なる複数枚の画像を、サムネイルのような形で表示したページを作りたいと思い、li要素を用いて画像を並べているのですが、同じ段の画像の、上端が揃わない場合があります。

ただ、毎回詰められるわけではなく、上端が揃っている場合もあります。
常に各段の上端を揃えて表示させたいのですが、どうすればよいか教えて頂ければと思います。
HTML、CSSコードは、以下のように記述しています

html
1<body>
2<ul>
3  <li><img src="pic001.jpg"></li>
4  <li><img src="pic002.jpg"></li>
5  <li><img src="pic003.jpg"></li>
6  <li><img src="pic004.jpg"></li>
7  <li><img src="pic005.jpg"></li>
8  <li><img src="pic006.jpg"></li>
9  <li><img src="pic007.jpg"></li>
10  <li><img src="pic008.jpg"></li>
11</ul>
12</body>

css
1ul{
2  list-style: none;
3}
4ul li{
5  width: 25%;
6  float: left;
7}
8ul img{
9  width: 100%;
10}
11ul:after{
12  display: table;
13  content: "";
14  clear: both;
15}

行動規範の内容に同意します

回答2件

ベストアンサー

IE10+ですがflexbox使ってみてはいかがでしょう？

ul{
  display: flex;
  justify-content: spece-between;
}
ul li{
  width: 25%;
  align-self: flex-start;
}
/*ベンダープレフィックスは省略しています*/

もしくはcssでの実装にこだわらずmatcheight.js等のプラグインを利用するのもいいかと思います。

投稿2016/04/15 15:35

編集2016/04/15 15:36

manabufukai

総合スコア700

退会済みユーザー

2016/04/15 15:46

manabufukaiさん回答有難うございます flexboxですか、初めて知りました確かに、上端揃え等の指定ができ、使い易そうです是非試してみたく思います

manabufukai

2016/04/15 15:57

古い環境を考慮する必要が無ければ、flexboxはかなり便利だと思います。 IE10以下のサポート打ち切りが発表されて以来注目を浴びています。指定できるプロパティがかなり多いため、やや複雑なところがあったりクセが少々ありますが（画像が絡んだ際のstretchなど）、慣れるととても使いやすいと思います。

行動規範の内容に同意します

<li>の直下に高さを指定したブロック要素を一段設けてはどうでしょうか？ ```HTML <ul> <li><div class="outer"><img src="pic001.jpg"></div></li> <li><div class="outer"><img src="pic002.jpg"></div></li> <li><div class="outer"><img src="pic003.jpg"></div></li> <li><div class="outer"><img src="pic004.jpg"></div></li> <li><div class="outer"><img src="pic005.jpg"></div></li> <li><div class="outer"><img src="pic006.jpg"></div></li> <li><div class="outer"><img src="pic007.jpg"></div></li> <li><div class="outer"><img src="pic008.jpg"></div></li> </ul> ``` ```CSS

ul>li>div.outer{
haight:/適度な高さ/;
}

投稿2016/04/15 15:10

編集2016/04/15 15:11

退会済みユーザー

総合スコア0

退会済みユーザー

2016/04/15 15:21

Sora-tanさん回答有難うございます確かにそれなら高さが均一になるので、揃いますねただ、縦長の画像だと、画像が一部切り取られた形になるかと思いますイラストを載せるページを想定しており、縦長の画像と横長の画像が混在する形となっていますできれば高さを指定せずに、上端を揃える方法があればと考えております

行動規範の内容に同意します

あなたの回答