画像を右下から詰めて表示したい

質問

画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。
少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。
　　　　　　←□■■
■■■■■■■■
■■■■■■■■
■■■■■■■■　←ここからスタート

htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような
かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが
いけないのでしょうか…？どなたかよろしくお願いいたします。

<ul>
<li><img src="icon.png" width="15px" height="13px" alt=""></li>
<li><img src="icon.png" width="15px" height="13px" alt=""></li>
<li><img src="icon.png" width="15px" height="13px" alt=""></li>
<li><img src="icon.png" width="15px" height="13px" alt=""></li>
<li><img src="icon.png" width="15px" height="13px" alt=""></li>
</ul>

ul{
list-style:none;
text-align:center;
}
li{
width:21px;
height:17px;
float:right;
}

回答No.3

mazimekko3 · ベストアンサー

div#img_contents {
text-align:right;
width: XX px;
height: YY px;
overflow: auto;
}

div#img_contents img {
width: xx px;
height: yy px;
}

と指定しておけば

<div id="img_contents"></div>

これの大きさは固定で、中の画像の表示サイズも一律で同じになるので
一段ずつ<br>の改行で段分けしてもページ幅を気にしなくてもよいと思いますけど。

下の古い画像の表示位置は変わらないので、画像追加のたびに上の<br>の位置を変えて改行するのがベストな気がします。

で、おまけ

「画像サイズを統一したくない」ならtableが必要になりますし
「手作業が嫌」ならそもそも不可能ですので。
（プログラム組んでソース丸ごと書き換えれば不可能じゃないですが）

たぶんどこかのサイトを見てやってみたくなったのでしょうが、
そのサイトもおそらくtable使用、もしくは普通に改行して表示させていると思います。

お礼

重ね重ねありがとうございます。試してみたところ上手くいきました。
<br>という存在に全く気がつきませんでして、お恥ずかしい限りです。

画像のサイズは全て同じなので大丈夫です。
他サイトを見たわけではありませんでしたので、こちらを利用させていただきました。
そうであればソースを見て納得できたのですが…。

大変助かりました。どうもありがとうございました。

回答No.2

mazimekko3

ええっと、liもtableも使わずにできませんか？
なんか余計なことをしているような。

「画像を詰めて表示」と言っても、ソースを書くのは手作業でしょ。
右寄せに書けば普通に右詰めに表示されると思いますが。

お礼

御回答ありがとうございます。

申し訳ございません。なるほど、と思いやってみたのですが私にはできませんでした…。
やはり上詰め、のような形になってしまうのです。
□■■■■■■■
■■■■■■■■
■■■■■■■■
　　　　　　 　■■■
一段、一段分けるのはページの幅が変更される可能性もあるので、
できればしたくないな、と思うのです。
私の知識が至らないせいだったかもしれません。
せっかく教えていただいたのに申し訳ございません。本当にありがとうございました。

回答No.1

Oh-Orange

★実現不可能。無理だと思います。
・HTML ソースは左上→右上、上部→下部へ向かって解読されて表示されていきます。
　この仕様のために『右下』から『上方向』に向かって表示するのは不可能な事と思われます。
・それから<LI>タグよりも<TABLE>タグの方が有用な方法ですね。
　<LI>タグは項目を行単位で表示しますので、横方向に連続して文字、画像などは表示されません。
　<TABLE>タグで書き直して下さい。また、『左上』→『右下』の方向ですので我慢して下さい。
　『左上』→『右下』は HTML 文法のルールですよ。
・以上。参考に！

●CSS定義
#IDName TH{
　TEXT-ALIGN:center;
　VERTICAL-ALIGN:middle;
　WIDTH:21px;
　HEIGHT:17px;
}
#IDName IMG{
　WIDTH:15px;
　HEIGHT:13px;
}

●HTMLソース
<TABLE CELLSPACING=0 CELLPADDING=0 ID=IDName>
<TR>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
</TR><TR>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
</TR><TR>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
　<TH><IMG SRC="icon.png" ALT=""></TH>
</TR>
</TABLE>

お礼

回答していただいてありがとうございます。

不可能だったのですね。丁寧に教えていただきありがとうございます。
教えていただいたテーブルタグを使って行ってみます。
いろいろな講座サイト様を見ているうちに、レイアウトにテーブルタグを使わない、と
そればかり考えてしまい、どこまでがレイアウトに入るのか分からなくなっていました。
大変参考になりました。ありがとうございました。