使用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

有幾種不同的方法可以做到這一點，但以下是一種方法的快速樣本。

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

我用內嵌樣式此示例，但你可以很容易地將這些在樣式表和引用的類或ID。

Answer 3

浮動圖像的權利，這將首先導致您的文字環繞它。

然後無論什麼非常下一個元素是，將其設置爲{清除：正確; }一切都將停止環繞圖像。

Answer 4

爲了使圖像向右移動：

float: right; 

要使文本不換行：

clear: right; 

對於最佳實踐，把CSS代碼在你的樣式表文件。一旦你添加了更多的代碼，它會看起來很雜亂，很難編輯。