CSS：如何在段落中使用高度在左浮动图像上创建连续行

Question

我有一个浮动的图像左边图像旁边有文字环绕图像。

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

查看这些图片，了解我正在努力实现的目标：

红色方块是图像。

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

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

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

Answer 1

在研究之后，我认为文本缩进正是您正在寻找的。 http://www.w3schools.com/cssref/pr_text_text-indent.asp

Answer 2

您可以使用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;
}

Answer 3

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

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

Answer 4

您可以使用...等待它来获得对第一行的更多控制权...... first-line selector

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