いつもお世話になっています。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/04/15 15:46
2016/04/15 15:57