如何將圖像插入到元素的側面

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>