案例：图文混排

HTML

<div class="pic_news">
    <h1> 雨巷</h1>
    <h2>戴望舒</h2>
    <p><img src="images/1.jpg" alt="" /></p>
    <p> 撑着油纸伞，独自
        彷徨在悠长、悠长
        又寂寥的雨巷，
        我希望逢着
        一个丁香一样的
        结着愁怨的姑娘。 </p>
    <p>她是有
        丁香一样的颜色，
        丁香一样的芬芳，
        丁香一样的忧愁，
        在雨中哀怨，
        哀怨又彷徨； </p>
    <p>她彷徨在寂寥的雨巷，
        撑着油纸伞，
        像我一样，
        像我一样地
        默默踟躇着
        冷漠、凄清，又惆怅。 </p>
    <p>她默默地走近，
        走近，又投出
        太息一般的眼光
        她飘过
        像梦一般地，
        像梦一般地凄婉迷茫。 </p>
    <p>像梦中飘过
        一枝丁香地，
        我身旁飘过这个女郎；
        她静默地远了，远了，
        到了颓圮的篱墙，
        走尽这雨巷。 </p>
    <p>在雨的哀曲里，
        消了她的颜色，
        散了她的芬芳，
        消散了，甚至她的
        太息般的眼光
        丁香般的惆怅。 </p>
    <p>撑着油纸伞，独自
        彷徨在悠长、悠长
        又寂寥的雨巷，
        我希望飘过
        一个丁香一样的
        结着愁怨的姑娘。 </p>
</div>
					    

CSS

.pic_news { width: 800px; /* 控制内容区域的宽度，根据实际情况考虑，也可以不需要 */ }
.pic_news h2 {
    font-family: "隶书";
    font-size: 24px;
    text-align: right;
}
.pic_news img {
    float: left; /* 使图片旁边的文字产生浮动效果 */
    margin-right: 5px;
    height: 250px;
}