右对齐HTML中的块元素

Question

我想在浮动容器中右对齐块元素.

假设以下标记.

<div style="float: left;">
  <img style="display: block;" src="...">
  <img style="display: block;" src="...">
</div>

   current                 wanted
+-----------+          +-----------+
|+-------+  |          |  +-------+|
||       |  |          |  |       ||
||       |  |          |  |       ||
|+-------+  |   --->   |  +-------+|
|+----+     |          |     +----+|
||    |     |          |     |    ||
|+----+     |          |     +----+|
+-----------+          +-----------+

我尝试过的:

• div { text-align: right; }- 在IE8中工作,在Firefox中失败(当然,图像是块,不应该受到影响text-align)
• img { margin: 0 0 0 auto; } - 适用于Firefox,在IE8中失败
• 将图像浮动到右侧 - 不起作用,因为我从不希望图像在同一条线上.此外,浮动图像不再压低以下内容.

我还能尝试什么？我更喜欢纯CSS解决方案,如果可能的话.

---

UPDATE

这是一个解释完整标记的小提琴:http://jsfiddle.net/Tomalak/yCTHX/3/

设置float: right;适用于所有真正的浏览器,对于IE8,它首先在整个宽度上扩展行中的图像框,然后向下推动文本框.

Answer 1

div > img { float:right; clear:right; }

Answer 2

使用 CSS 对齐元素的正确方法是在容器上设置 text-align 并在子元素上设置 margin。
您的尝试是错误的，因为您在 img 标签上设置边距和文本对齐。你的 CSS 应该是这样的：

div {
float:right;
text-align: right;
}
img {
margin: 0 0 0 auto;
}  

刚刚在 ie8、ff 和 chrome 上进行了测试。
http://jsfiddle.net/notme/wfwjf/2/