html - css 部分填充以通过背景图像 float 文本

Question

我有背景图片，我使用填充文本。

JsBin:

example

HTML:

<div id="wrapper">
     text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>

CSS:

#wrapper {
  padding: 10px 10px 10px 120px;
  background: url('image.jpg') no-repeat 10px 10px;
}

问题:

如何只对 div 的一部分使用填充？

输出:

我的试用:

将空 div(100x100) 放在 background-image 应该出现的位置，并将 float:left 添加到该空白 div。但我正在寻找 CSS 解决方案。请注意，我有理由将图像放在背景中，而不是放在 div 中。

寻找您的建议。

Answer 1

使用伪元素代替占位符 div 并将其 float ，就像内联图像一样。

http://jsbin.com/egeqAMi/4

#wrapper:before {
  content:'';
  float:left;
  width:100px;
  height:100px;
}