この5分間のチュートリアルでは、
画像をテキストの右側に浮かべる方法を学ぶことに興味がありますか? もしそうなら、あなたは一人ではありません。 プログラマは、Webページ上のイメージをテキストの内側に表示したり、周囲にテキストを配置したり、折り返したりしたい場合があります。 ありがたいことに、画像を操作することはテキストを操作することと似ています。したがって、後者を使った経験があれば、このプロセスは全く難しいはずはありません。
実際には、CSSのfloatプロパティを使用すると、イメージをテキストの右側に浮動させ、テキストを左側に移動させるのは簡単です。 方法については、この5分間のチュートリアルを使用してください。
入門
まず、テキストの段落を書き、段落の先頭に画像を追加します。 これは、テキストの前で
タグの後に行う必要があります。
次に、イメージにスタイル属性を追加し、floatプロパティを適用します。
あなたのテキストはイメージに対して右に上がるので、読みやすくするために画像に余白をつけます:
margin shorthandプロパティは、上、右、下、左( TRBL )の順番でマージンを適用します。
ラッピング
そして、それはそれを行います。 今すぐ右に画像を浮かべることは全く難しいことではありません。 左に画像を浮かべ、それを中央に浮かべたい場合もあります。 最初の移動は可能ですが、残念ながら2つの列のレイアウトが必要なため、イメージを中心に浮かべることはできません。