テキストを画像の周りに折り返すコードが必要ですか。 通常、HTMLページを作成すると、すべてが直線的に流れます。つまり、ブロックが直接次々に流れます。 私のこれまでの記事はすべてこの例です。つまり、テキスト、次に画像、そしてテキストなどです。
時には、画像の下ではなく画像の横にテキストを含めることができます。 これは画像の周りのテキストの折り返しと呼ばれます。 HTMLを使用してテキストを折り返すのは実際にはかなり簡単です。 テキストを折り返すためにCSSを使う必要はないことに注意してください。
しかし、最近ではW3Cはこれらの種類のタスクにHTMLではなくCSSを使用することを推奨しています。 以下で両方の方法について説明しますが、可能であれば、レスポンシブWebサイトの設計により適しているため、CSSを使用することをお勧めします。
HTMLを使用して画像の周囲にテキストを折り返す
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Fusce dictum gravida enim、quis ultricies mauris posisre quis。 双子の矢状面矢じりをしているデュイス。 ごく普通の人は、先天性白内障および分娩中のじんましん、じんましん疹を発症します。 履歴書を引用するlobortis dictum。 Curabitur痴女posuere laoreet Lorem EgestのUt pellentesque nuncとnon-imperdiet enimが主張する。
テキストを画像の右側に沿って折り返すには、画像を左に揃える必要があります。
あなたの文章はここに行きます。
テキストを左側に、イメージを一番右側に表示するには、alignパラメータを「right」に変更します。
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Fusce dictum gravida enim、quis ultricies mauris posisre quis。 双子の矢状面矢じりをしているデュイス。 ごく普通の人は、先天性白内障および分娩中のじんましん、じんましん疹をします。 履歴書を引用するlobortis dictum。 Curabitur痴女posuere laoreet Lorem EgestのUt pellentesque nuncとnon-imperdiet enimが主張する。
あなたの文章はここに行きます。
それでおしまい！ とても簡単でしょ？ CSSを使用したいのは、テキストと画像の間にスペースを空けるために、写真に余白を追加する場合だけです。
次のCSSスタイルコードを使用して、画像に余白を追加できます。
あなたの文章はここに行きます。
上記のコードでは、MARGIN CSS要素を使用して、画像の右側に10ピクセルの空白を追加しています。 画像を左に揃えたので、空白を右に追加します。
基本的に、4つの数字は左上右上を表します。 したがって、右揃えの画像に空白を追加する場合は、次のようにします。
あなたの文章はここに行きます。
そのため、このタスクを実行するためにHTMLを使用するのは非常に簡単ですが、やはりレスポンシブサイトではうまく機能しない可能性があります。
CSSを使用してテキストを画像の周りに折り返す
画像の周りにテキストを折り返すより良い方法はCSSを使うことです。 それはあなたに要素の配置に対するよりきめ細かい制御を与え、そして現代のコーディング標準でよりよく働きます。
HTMLの例ではCSSをimageタグに直接含めましたが、もうこれをやるべきではありません。 代わりに、すべてのCSSコードを保持するスタイルシートと呼ばれる別のファイルが必要です。
IMGタグでは、タグにクラスを割り当てて名前を付けるだけです。 私の例では、私はクラスにleftという名前を付けました。 私のスタイルシートで、私がしなければならないのは以下のコードを追加することだけです：
.left {float：left; パディング：0 10px 0 0;} ご覧のとおり、左揃えの画像の右側に10pxのパディングを追加しました。 また、floatプロパティを使用して、画像をドキュメントの通常の流れから移動させて、親コンテナの左側に配置しました。
ご覧のとおり、そのすべてのコードをIMGタグ自体に追加するよりもはるかにクリーンです。 管理も簡単で、Webページの外観をカスタマイズするためにもっとたくさんのCSSプロパティを使うことができます。 質問がある場合は、コメントしてください。 楽しい！
