在HTML中右对齐块元素

前端之家收集整理的这篇文章主要介绍了在HTML中右对齐块元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在浮动容器中右键对齐块元素.

假设以下标记.

<div style="float: left;">
  <img style="display: block;" src="...">
  <img style="display: block;" src="...">
</div>
   current                 wanted
+-----------+          +-----------+
|+-------+  |          |  +-------+|
||       |  |          |  |       ||
||       |  |          |  |       ||
|+-------+  |   --->   |  +-------+|
|+----+     |          |     +----+|
||    |     |          |     |    ||
|+----+     |          |     +----+|
+-----------+          +-----------+

我试过的

> div {text-align:right; } – 在IE8中工作,在Firefox中失败(自然,图像是块,不应受文本对齐的影响)
> img {margin:0 0 0 auto; } – 在Firefox中工作,在IE8中失败
>将图像浮动到右边 – 不工作,因为我不想在同一行上的图像.此外,浮动图像不再推下面的内容.

还有什么可以尝试的?我更喜欢纯CSS解决方案,如果这是可能的话.

UPDATE

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

设置float:right;适用于所有真正的浏览器,对于IE8,它会在整个宽度上首先将图像框扩展到第一行,并将文本按下框.

解决方法

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

猜你在找的HTML相关文章