Css 对齐段落旁边的图像

不仅仅是一个简单的图像旁边的一段，<但与一些空间像这样

（来源：）

到目前为止，我所做的是：

 <div class="span6">

    <span class="head">Header</span>
            <img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
    <span class="paragraph">
        This is Photoshop's version  of Lorem Ipsum.
            Proin gravida nibh vel velit auctor aliquet.
            Aenean sollicitudin, lorem quis bibendum auc
        tor, nisi elit consequat ipsum, nec sagittis sem nibh i
    </span>
 
 </div>

.span8 {
   width: 620px;
}
.head {
   font-weight: bold;
   font-size: 26px;
   float: left;
}

.paragraph {
   font-size: 14px;
   width: 300px;

}

标题
这是Photoshop版本的Lorem Ipsum。
在孕妇的子宫颈上做手术。
埃尼安·索利西图丁，洛雷姆·奎斯·比本杜姆·奥克
tor，nisi Elite consequat ipsum，nec sagittis sem nibh i
.span8{
宽度：620px；
}
.头{
字体大小：粗体；
字号：26px；
浮动：左；
}
.段{
字体大小：14px；
宽度：300px；
}

看起来是这样的

（来源：）

忽略这一行，这是网络上的裁剪图像

我做错了什么？我怎样才能解决这个问题。

---

谢谢

这里有一个JSFIDLE供您参考：

代码应该更像这样：

<div class="span6">

    <p>Header</p>
    <div class="head">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgMvCRHrTA30jksWsHfDZ4GwWfjJhM8Ck2RAtA_OLeOpnGRTrEXw"/>
    </div>

    <div class="paragraph">
    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auc
    tor, nisi elit consequat ipsum, nec sagittis sem nibh i
    </div>

    <div style="clear:both"></div>

 </div>

---

祝你好运。

想想这把小提琴吧。我在父div中使用了div元素而不是span元素

<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>

元素的宽度小于父元素，并且由于没有使用任何浮动或清除，因此元素是内联可见的

<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>

.paragraph {
 float:right;}