在HTML中右对齐块元素 [英] Right-align block elements in HTML

问题描述

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

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

假设以下标记.

<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中失败
• 将图像浮动到右侧-不起作用，因为我从不希望图像在同一行上.另外，浮动的图像不再压低以下内容.

• 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.

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

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

更新

以下是说明完整标记的小提琴: http://jsfiddle.net/Tomalak/yCTHX/3/

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

设置float: right;适用于所有实际的浏览器，对于IE8，它首先将行中的图像框扩展到整个宽度，然后将带有文本的框向下推.

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; }

这篇关于在HTML中右对齐块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！