css - 在段落旁边对齐图像

Question

不仅仅是段落旁边的简单图像<，而是像这样的一些空格

_{（来源：gyazo.com）}

到目前为止我所做的：

 <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;

}

它看起来像这样

_{（来源：gyazo.com）}

忽略这条线，它是网络上的裁剪图像。

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

Answer 1

这是给你的 jsfiddle：http: //jsfiddle.net/Xxw85/

代码应该看起来更像这样：

<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>

和CSS：

.span6 {
  width: 620px;
  background-color:#efefef;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
color:red;
}

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

祝你好运。

Answer 2

考虑一下这个小提琴。我在父 div 中使用了 div 元素而不是 span 元素。

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

并通过添加此内容将内容向右浮动。

.paragraph {
 float:right;}

http://jsfiddle.net/AaXTm/8/

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