web-dev-qa-db-ja.com

CSS HTMLを使用して画像を右揃え

CSSを使用して画像を右揃えするにはどうすればよいですか。

I しないテキストにwrap-around 画像。右揃えの画像が単独で線上にあるようにします。

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

jsFiddle

59
alex

画像を右にフロートします。これにより、最初でテキストが折り返されます。

そして、まさにnext要素が何であれ、{clear:right; }そしてすべてが画像の回り込みを停止します。

12
jeffszusz

これを行うにはいくつかの異なる方法がありますが、以下は1つの方法の簡単なサンプルです。

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

このサンプルではインラインスタイルを使用しましたが、スタイルシートに簡単に配置して、クラスまたはIDを参照できます。

5
Misty Lackie

画像を右に移動するには:

float: right;

テキストを折り返さないようにするには:

clear: right;

ベストプラクティスとして、スタイルシートファイルにcssコードを入れてください。コードを追加すると、面倒で編集しにくくなります。

2
Sweet_Cherry