CSSを使って画像を右に浮かべる方法

テキストの右側に画像を浮かべる方法を学ぶことに興味があるなら、それはかなり簡単な作業であることを喜んで知ることができます。プログラマは、Webページ上のイメージをテキストの内側に表示したり、周囲にテキストを配置したり、折り返したりしたい場合があります。ありがたいことに、画像を操作することはテキストを操作することと似ています。したがって、後者を使った経験があれば、このプロセスは全く難しいはずはありません。

実際には、CSSのfloatプロパティを使用すると、イメージをテキストの右側に浮動させ、テキストを左側に移動させるのは簡単です。方法については、この5分間のチュートリアルを使用してください。

入門

まず、テキストの段落を書き、段落の先頭に画像を追加します。これは、テキストの前に行う必要がありますが、

タグ）：

次に、イメージにスタイル属性を追加し、floatプロパティを適用します。

あなたのテキストはイメージに対して右に上がるので、読みやすくするために画像に余白をつけます：

margin shorthandプロパティは、上、右、下、左（TRBL）の順番でマージンを適用します。

ラッピング

そして、それはそれを行います。今すぐ右に画像を浮かべることは全く難しいことではありません。左に画像を浮かべ、それを中央に浮かべたい場合もあります。残念ながら、最初の移動は可能ですが、通常は2列のレイアウトが必要なため、イメージを中央に浮かべることはできません。