图像旁边的特殊缩进文字

Question

我想生成一些特定的样式,左侧有一个图像(图标),图标旁边有一些描述(纯文本).

所以这就是我到目前为止所得到的:

.elem {
  margin-left: 7%; 
  position: relative; 
  width: 100%;
}

.text {
  display: inline;
  vertical-align:middle;
}

.img {
  width: 5%; 
  vertical-align:middle;
}

<div class="elem">
   <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/>
   <span class="text">
     (1) This is a example text
   </span>
</div>

<br>

<div class="elem">
   <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/>
   <span class="text">
     (2) <b>This is a LONG example text, because this is a LONG example text while it's a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</b>
   </span>
</div>
<br>

<div class="elem">
   <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/>
   <span class="text">
     (3) This is a example text
   </span>
</div>
                                   

你可以看到它工作得很好,但是second elem (div)长文本会产生一个换行符,导致我的文本浮动到左边.但是我希望这些行能像句子中的第一个单词一样缩进.看看这个:

Answer 1

你可以尝试像这样弯曲：

.elem {
  margin-left: 7%;
  display:flex;
  align-items:flex-start;
  padding-top:5px;
  margin-bottom:10px;
}

.img {
  width: 30px;
  margin-top:-5px;
}

<div class="elem">
  <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" >
   (1)
  <span class="text">
     This is a example text
   </span>
</div>

<div class="elem">
  <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" >
  (2)
  <span class="text">
      <b>This is a LONG example text, because this is a LONG example text while it's a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</b>
   </span>
</div>

<div class="elem">
  <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" >
  (3)
  <span class="text">
      This is a example text
   </span>
</div>