html - HTML 中的右对齐 block 元素

Question

我想在 float 容器中右对齐 block 元素。

假设以下标记。

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

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

我尝试过的:

• div { text-align: right; - 在 IE8 中工作，在 Firefox 中失败(自然地，图像是 block 并且不应该受到 text-align 的影响)
• img { 边距:0 0 0 自动； - 在 Firefox 中工作，在 IE8 中失败
• 将图像向右浮动 - 不起作用，因为我不希望图像在同一行。此外， float 图像不再下推以下内容。

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

---

更新

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

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

Answer 1

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