画像の周りにテキストを折り返すコードが必要ですか？通常、HTMLページを作成すると、すべてが線形に流れるので、別のブロックの直後に1つのブロックがあります。これまでの投稿のすべてがテキスト、画像、テキストなどの例です。
画像の下にではなく画像の横にテキストを挿入することがあります。これはイメージの周りにテキストを折り返すと呼ばれます。実際には、HTMLを使用してテキストを折り返すのはかなり簡単です。テキストを折り返すためにCSSを使う必要はないことに注意してください。
0
しかし、最近W3CはHTMLの代わりにCSSを使うことを推奨していますこれらの種類の仕事のために。以下の両方の方法について言及しますが、可能であれば、レスポンシブウェブサイトデザインに適応するので、CSSを使用する方が良いです。
HTMLを使用してテキスト画像を囲む
1
Lorem ipsum dolor sit amet、consipetur adipiscing elit。 Fusce dictum gravida enim、quis ultricies mauris posuere quis。デュイスはティンディダント・サギチをアディピシングしています。お母さんのお母さんのお母さんのお母さん、お母さんのお母さん、ナスケルの尻尾。黄色の紅色の声を出す。 Curabitur molestie posuere laoreet。
画像の右側にテキストが折り返されるようにするには、画像を左に揃えなければなりません：
3
2
/ s>
Lorem ipsum dolor sit amet、consipetur adipiscing elit。 Fusce dictum gravida enim、quis ultricies mauris posuere quis。デュイスはティンディダント・サギチをアディピシングしています。お母さんのお母さんのお母さんのお母さん、お母さんのお母さん、ナスケルの尻尾。黄色の紅色の声を出す。 Curabitur molestie posuere laoreet。
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
これで終わりです。かなり簡単な権利ですか？
画像に余白を追加するには、画像に余白を追加する必要があります。
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
上記のコードでは、MARGIN CSS要素を使用して、イメージの右側に10ピクセルの空白を追加しています。画像を左に揃えたので、右に空白を追加します。
基本的に、4つの数字はTOP RIGHT BOTTOM LEFTを表します。
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
したがって、HTMLを使ってこのタスクを実行するのはかなり簡単ですが、一度実行するだけです
CSSを使用してイメージの周囲にテキストを折り返す
イメージの周りにテキストを折り返すより良い方法は、CSSを使用することです。
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
HTMLサンプルの画像タグにCSSを直接組み込んだとしても、あなたは本当にもうこれをやってはいけません。代わりに、すべてのCSSコードを保持するスタイルシートと呼ばれる個別のファイルを用意する必要があります。
IMGタグでは、タグにクラスを割り当てて名前を付けるだけです。私の例では、クラス名をleftと命名しました。私のスタイルシートでは、次のコードを追加するだけです：
.left {
float: left;
padding: 0 10px 0 0;}
ご覧のとおり、左揃えの画像の右側に10ピクセルのパディングを追加しました。また、フロートプロパティを使用して、ドキュメントの通常の流れからイメージを移動し、親コンテナの左側に配置します。
ご覧のとおり、すべてのコードを追加するよりもはるかにクリーンですIMGタグ自体に管理も簡単ですし、さらに多くのCSSプロパティを使用してウェブページの外観をカスタマイズすることができます。ご不明な点がございましたら、お気軽にコメントしてください。お楽しみください！