使用CSS HTML右对齐图像

Question

如何使用CSS右对齐图像。

我不希望文本到wrap-around的图像。我希望右对齐的图像自己在一条线上。

Answer 1

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>    

jsFiddle。

Answer 2

向右浮动图像，这将首先导致文本环绕它。

然后，无论下一个元素是什么，将其设置为{clear：right;一切都将停止环绕图像。

Answer 3

有几种不同的方法可以做到这一点，但以下是一种方法的快速示例。

<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>

我为此示例使用了内联样式，但您可以轻松地将它们放在样式表中并引用类或ID。

Answer 4

要使图像向右移动：

float: right;

要使文本不被包装：

clear: right;

要获得最佳实践，请将css代码放在样式表文件中。一旦你添加了更多的代码，它将看起来很混乱，很难编辑。