- ベストアンサー
リスト内での画像の下部揃え
- リスト内の画像を下部揃えにする方法を教えてください。
- テキストと画像の組み合わせで横並びのリストを作成しましたが、画像が上下するため見栄えが悪いです。
- display: inline-block;とvertical-align: bottom;を試しましたが効果がありません。どうすれば下部揃えにすることができますか？
- kurobon619
- お礼率76% (314/410)
- CSS
- 回答数1
- ありがとう数11
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず、根本的なこと。 HTMLは徹底して文書構造だけを記述すること。将来のメンテナンスが格段に楽になります。 スタイルシートは、プレゼンテーションを指定します。 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」必読!! <section> <h2>商品一覧</h2> <section id="NewGoods"> <ul> <li>2014年8月1日(金) <p> <a href="">商品説明・・・。商品説明・・・。商品説明・・・。</a> <img src="" width="" height="" alt=""> </p> </li> と、まったく率直(すなお)に文書構造をHTMLでマークアップしていきます。 上記は、HTML5ですが、HTML4.01には文書構造を示す要素が用意されてなくて、『id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』します。 <div class="section"> <h2>商品一覧</h2> <div class="section" id="NewGoods"> <ul> <li>2014年8月1日(金) <p> <a href="">商品説明・・・。商品説明・・・。商品説明・・・。</a> <img src="" width="" height="" alt=""> </p> </li> そのうえで div#NewGoods{padding:10px;} div#NewGoods ul,div#NewGoods ul li{ list-style:none; margin:0;padding:0; font-size: 12px; } div#NewGoods ul li{ float: left; width: 170px;height: 240px; padding:0 10px 8px 0; position:relative; } div#NewGoods ul li p{ margin:0;text-indent:1em;line-height:1.6em; } div#NewGoods ul li p img { display:block; width:140px;height:auto; position:absolute; bottom:5px;left:15px; } だけでよい。 ※ただし、標準モードで動作するように<DOCTYPE>を指定すること。IE7への対策が不要になるし。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ORUKA1951さん 素晴らしい解説どうもありがとうございます。 分かりました。