代码如下，好好研究：
<style type="text/css">
.item .pic { float:leftmargin-right:10pxwidth:100pxheight:100px}
.item .content {float:leftwidth:500px}
</style>
<div class="item">
<div class="pic"><img src="a.jpg"></div>
<div class="content">文字部分</div>
</div>由于这个功能都要使用到浮动float，就需要对左右两边的模块都要定义款度，不然的话，默认的都是100%，是填充整个外部容器，是无论如何都不能左右显示了。
就是利用浮动的原理<style type="text/css">
.item{padding:10px 20pxborder:1px solid redwidth:200px}
.item .pic { float:leftmargin-right:10px}
.item .content { overflow:hiddenzoom:1} /* 或用display:table-cell */
</style>
<div class="item">
<div class="pic"><img src="a.jpg"></div>
<div class="content">
fjkdjfkdejfioef<br/>
fjkdjfeifj</br>
kjfkdjfdjf</br>
fjkdjfiejf<br/>
jfiejfifeijfiejfiejf<br/>
fjkdjfiejfkdjfk<br/>
fjiejfiejfiej<br/>
fjiejfiejf</div>
</div>
<style type="text/css">
.item{padding:10px 20pxborder:1px solid redwidth:200px}
.item .pic { float:leftmargin-right:10px}
.item .content { overflow:hiddenzoom:1display: inline} /* 或用display:table-cell */
</style>
<div class="item">
<div class="pic"><img src="a.jpg"></div>
<div class="content">
fjkdjfkdejfioef<br/>
fjkdjfeifj</br>
kjfkdjfdjf</br>
fjkdjfiejf<br/>
jfiejfifeijfiejfiejf<br/>
fjkdjfiejfkdjfk<br/>
fjiejfiejfiej<br/>
fjiejfiejf</div>
</div>
<style type="text/css">.main{width: 80%margin: 0 autoheight: 100px}
.img{width: 40%float: left}
.img img{height: 100pxmax-width: 100%}
.main p{width: 60%float: leftword-break: break-allline-height: 100px}
</style>
<div class="main">
<div class="img">
<img src="img/xxx.jpg" >
</div>
<p>你的文字</p>
</div>
至于p标签的行高你可以随意调，不懂可以追问或私我
