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

Question

我有一个浮动的图像在图像的左侧，图像周围有文字。

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

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

红色方块是图像。

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

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

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

Answer 1

在调查之后，我认为 text-indent 正是你正在寻找的。 http://www.w3schools.com/cssref/pr_text_text-indent.asp

Answer 2

您可以使用带有text-indent背景图像的解决方法。演示。

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;
}

Answer 3

如果您使用浮动进行定位，则很难实现这一点，因为浮动不会破坏定位的常规流程。改用绝对定位和 z-index 属性进行叠加。然后使用左边距或 text-indent 属性缩进第一行。

如果您将图像放在背景中，您可以更轻松地完成此操作。

Answer 4

您可以使用 ...wait for it ...选择器获得对第一行的更多控制first-line

p:first-line {padding-left:50px;}