html：

<style type="text/css">
 div{background-color: #000;}
 .div1,.div2{background-color: #ccc;float: left;width: 200px;color: #fff;}
}
</style>
<div style="float:left;overflow:hidden;">
 <div class="item">
 <div class="div1">
 ![](http://img.jpg)
 </div>
 <div class="div2">
 <p>這是一段文字</p>
 </div> 
 </div>
</div>

不固定高度時：div隨著內容伸展：

image.png

修改后：

<style type="text/css">
 div{background-color: #000;overflow: hidden;
}

 .div1,.div2{margin-bottom: -100000px;padding-bottom: 100000px;
 background-color: #ccc;float: left;width: 200px;color: #fff;}

}

</style>

<div style="float:left;overflow:hidden;">
 <div class="item">
 <div class="div1">
 ![](http://upload-images.jianshu.io/upload_images/1354453-7e9c3969c26c86ed.jpg@80Q?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 </div>
 <div class="div2">
 <p>這是一段文字</p>

 </div> 

 </div>

</div>

效果圖：

image.png

image.png

image.png