css - 如何使用 CSS 将图像放置在文本旁边

Question

我有两个 div 的 CSS 问题。我的第一个 div 包含文本，而第二个 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 以将图像放入 text ，您可以在该容器中浮动图像，并且文本将围绕它流动。

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

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

2 回答 2