html - CSS：两个元素，一个弯曲。防止缠绕。

Question

我需要将图像浮动到段落的右侧。这比我想象的要难得多。

                                  100px
+-------------------------+  +------------+
|                         |  |            |
|                         |  |            |
|   text                  |  |  img       |100px
|                         |  |            |
|                         |  |            |
+-------------------------+  +------------+


<div>
  <p>Some text...</p>
  <img src="url" />
</div>

当我更改视口时，我需要文本来弯曲。现在，当窗口变小时，图像会换行。

+--------------------------+ +
|                          | |
|       text               | |
|                          | |
+--------------------------+ |
+----------+                 |
|          |                 |
|  img     |                 |
|          |                 |
|          |                 |
+----------+                 |
                             v

我需要它来做到这一点：

+--------------+ +----------+  +
|              | |          |  |
|              | |   img    |  |
|              | |          |  |
|   text       | |          |  |
|              | +----------+  |
|              |               |
|              |               |
+--------------+               |
                               |
                               |
                               |
                               v

我不想在图像上使用 position:absolute 。还有其他方法吗？

Answer 1

将图像放在文本之前：

<div>
   <img src="url" />
  <p>Some text...</p>
</div>

工作：http: //jsfiddle.net/Cmacu/GgPYy/

不是：http: //jsfiddle.net/Cmacu/gxHNk/