行内元素设置靠右对齐,在HTML中右对齐块元素

I'd like to right-align block elements in a floating container.

Assume the following markup.

current wanted

+-----------+ +-----------+

|+-------+ | | +-------+|

|| | | | | ||

|| | | | | ||

|+-------+ | ---> | +-------+|

|+----+ | | +----+|

|| | | | | ||

|+----+ | | +----+|

+-----------+ +-----------+

What I've tried:

div { text-align: right; } - works in IE8, fails in Firefox (naturally, the images are blocks and not supposed to be affected by text-align)

img { margin: 0 0 0 auto; } - works in Firefox, fails in IE8

floating the images to the right - does not work as I never want the images on the same line. Also, floated images no longer push down the following content.

What else can I try? I prefer a pure CSS solution, if that's at all possible.

UPDATE

Here's a fiddle that explains the full markup: http://jsfiddle.net/Tomalak/yCTHX/3/

Setting float: right; works for all real browsers, for IE8 it extends the image box in the row first over the entire width and pushes down the box with the text.

解决方案

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