如何使用CSS在图像旁边放置图像

Question

我有两个div的CSS问题。 我的第一个div包含文本，而第二个div包含图像。我需要将图像div放在文本div的右上角。

我的div结构如下：

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

我想要达成这个目的：

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

文字文字 - 图片 -

文字文字 - 图片 -

文字文字文字

文字文字文字

文字文字文字

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

我用图像说明了这个问题：

如何实现这一目标？

Answer 1

<强> Float the image?

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

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

Live Example - 此示例演示了该原则。它有更多的样式，使它看起来更好，但没有它们将工作。玩它，看看我的意思。

Answer 2

如果重新格式化HTML以将图像放入文本中，则可以将图像浮动到该容器中，文本将围绕它流动。

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

将图像放入不同的容器意味着它们与该文本“分离”，因此文本无法流动。