在HTML中右对齐块元素

在HTML中右对齐块元素,第1张

概述我想在浮动容器中右键对齐块元素. 假设以下标记. <div style="float: left;"> <img style="display: block;" src="..."> <img style="display: block;" src="..."></div> current wanted+-----------+ @H_419_0@我想在浮动容器中右键对齐块元素.

假设以下标记.

<div >  <img  src="...">  <img  src="..."></div>@H_404_5@  
   current                 wanted+-----------+          +-----------+|+-------+  |          |  +-------+|||       |  |          |  |       ||||       |  |          |  |       |||+-------+  |   --->   |  +-------+||+----+     |          |     +----+|||    |     |          |     |    |||+----+     |          |     +----+|+-----------+          +-----------+@H_404_5@  

我试过的

> 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; }@H_404_5@                  总结       

以上是内存溢出为你收集整理的在HTML中右对齐块元素全部内容,希望文章能够帮你解决在HTML中右对齐块元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1092165.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-27
下一篇2022-05-27

发表评论

登录后才能评论

评论列表(0条)

    保存