html - 背景图像的浮动

Question

我有<div>with background-imagecss 规则。
html

<div class="myclass">Hello world</div>

CSS

.myclass
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    border: 1px red dotted;
}    

JSFiddle 演示

如何在 div 中制作背景图像以浮动文本？

PS：我不能div在当前创建另一个（或另一个元素）div

Answer 1

向 中添加填充以div移动文本。

.myclass
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    border: 1px red dotted;
    padding-left: 20px;
}

JS 小提琴：http: //jsfiddle.net/zqeTx/1/

Answer 2

您可以使用::before 伪元素。

jsfiddle 演示

.myclass:before
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
}

这种方法的优点是，如果有一个多行的长文本，它只会在第一行缩进文本。

多行jsFiddle Demo

Answer 3

添加text-indentcss属性并将背景图像固定在顶部，这样如果文本进入第二行，背景就不会移动。

.myclass {
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:2px 2px;
    border: 1px red dotted;
    text-indent:20px;
}

工作小提琴

Answer 4

在此处使用此 CSS 演示

.myclass
{   
    border: 1px red dotted;
}
.myclass:before
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    padding-left:20px;
    content:'';
}