css - CSSを使用してテキストの横に画像を配置する方法

Question

2つのdivを持つCSSに問題があります。私の最初のdivにはテキストが含まれ、2番目のdivには画像が含まれています。画像divをテキストdivの右上隅に配置する必要があります。

私のdiv構造は次のとおりです。

<div class="text">text text text .... more text</div>
<div class="images">image image</div>

これをアーカイブしたい：

========================

テキストテキスト -画像-

テキストテキストテキストテキスト

=========================

私はこの問題を画像で説明しました：ここに画像の説明を入力してください

これを達成する方法は？

score 3 · Accepted Answer

<style>.images { float: right; }</style>

<div class="images">image image</div>
<div class="text">text text text .... more text</div>

実例-この例は、原理を示しています。見栄えを良くするために、より多くのスタイルがありますが、それらがなくても機能します。それで遊んで、私が何を意味するかを見てください。

score 2 · Accepted Answer

HTMLを再フォーマットして画像をテキストに配置すると、そのコンテナ内に画像をフロートさせることができ、テキストがその周りを流れます。

<style>
  img { float:right; }
</style>
<div>
    <img src="image1.png">
    <img src="image1.png">
    Lorum ipsum .....
</div>

画像を別のコンテナに配置するということは、画像がそのテキストから「分離」されているため、テキストが流れないことを意味します。

2 に答える 2