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/