CSS:如何使段落中的连续行越过具有高度的左浮动图像

Question

我有一张 float 的图片 在图片旁边有文字环绕着图片。

我想将第一行文本放在图像旁边，然后将连续的文本行放在图像上方。这可能吗？

查看这些图像以了解我想要实现的目标:

红色方 block 是图片。

<img class="someImage" ... />
<span class="someText" ... />

.someImage { float:left; }
.someText { line-height:1.5em; margin-top:10px; padding:0 22px; }

图像有高度。我想将文本行(在段落的第一行之后)包裹在图像的顶部。我只希望第一行环绕图像。

Answer 1

您可以使用 text-indent 和背景图片作为变通方法。 <强> Demo .

HTML

<div id="text">
Lorem ipsum dolor sit amet...
</div>​

CSS

#text {
    background:url(your-image.jpg) top left no-repeat;
    text-indent:100px;
    padding-left:20px;
}