关于float定位问题

如图所示

<div>
 <img src="./img/phones/droid-pro-by-motorola.0.jpg" alt=""/>
<span>oh shady</span>
 <span>haha</span>
</div>

<style>

  
    img{
        height:70px;
        width:10%;
        float:left;
    }
    span{
        display:block;
        margin-top:5px;
    }

</style>
为什么span的宽度是从头开始，而不是在图片后边开始呢！？

---

你设置了span 为display为block,把它去掉就行

---

img{
    float:left;
}
span{
    display:block;
    margin-left:10%;  /*图片的宽度*/
}

个人觉得用span在这里语义不对…

---

楼上正解，网页是分为三层的，原始层，float是一层，绝对定位又是一层

---

因为float使得img脱离正常文档流了

span 显示指定 display 后成为块级元素，
按正常文档流排列 是从左边开始 占据一行

---

主要还是要看你要达到怎样的布局，左图右文？
那用一个div把右边的东西包起来，也设成float:left就可以了

<style type="text/css">
.wrap:after {content: ".";display: block;height: 0; clear: both; visibility: hidden;} 
img{float:left;}
.right{float:left;}
</style>


<div class="wrap">
    <img src="./img/phones/droid-pro-by-motorola.0.jpg" alt=""/>
    <div class="right">
        <span>oh shady</span>
         <span>haha</span>
    </div>
</div>

---

你好！谢谢你的回答
那么我不用float的话！如何定位呢
例如如下定位方法
div{
position:relative;
}
img{

    display:inline-block;
    height:70px;
    width:10%;
    position:relative;
}
span{
    display:inline-block;
    position:relative;
    width:90%;
}

这样定位 图片和文字又不在一行了！请问您有什么好方法！