如何将图像插入元素的一侧

Question

我想在我的php文件中插入一个代码，以便图像出现在文本的左侧（见图）。如何做到这一点？

示例图片：

这是我正在使用的代码：

<li class="slide">
   <div class="list-image.single"><span class="list-single single"></span></div>
   <h1 class="block-heading left mobile small"><?php echo $text; ?></h1>
</li>
`
<div class="list-image.single"><span class="list-single single"></span></div>

这是图像的来源。

.list-single.single {
    background: url('images/runnernew.png');
    height: 40x;
    width: 40px;
    display: block;
}

Answer 1

试试这个：

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family:   'Roboto', sans-serif;
  font-size: 12px;
  } 
ul {
  list-style: none;
  border-left: 2px solid BurlyWood;
  }
li {
  border-bottom: 1px solid BurlyWood;
  margin-bottom: 15px;
  }
.container {
  height: 120px;
  }
.list-image { 
  background-image: url('http://placekitten.com/g/100/100');
  background-color: BurlyWood;
  height: 100px; 
  width: 100px;
  display: block;
  float: left;
}
h1{
  display: inline;
  }

<ul>
<li class="slide" id="1">
  <div class="container">
            <div class="list-image"></div>
  <div class="words">
            <h1 class="left mobile small">Great range of protein packed drinks with added fibre, vitamins and minerals.</h1></div></div>
</li>
<li class="slide" id="2">
  <div class="container">
            <div class="list-image"></div>
            <h1 class="left mobile small">Absolutely no added sugar!</h1></div>
</li>
  </ul>