用DIV+CSS实现图文混排与文字列表一起显示

http://www.mhzg.net/a/20113/2011371047087.html

演示效果截图

用到的图片

CSS代码

<style>
*{ padding:0px; margin:0px;}
body{ font-size:12px; line-height:150%; color:#666666}
a{ color:#003399; text-decoration:none}
a:hover{ color:#999900;}
div{ overflow:hidden}
.box{ width:300px; margin:10PX auto;}
img{ border:0px;}
.p5{ padding:5px;}
.cle{ clear:both; height:0px;}
.m{ border:1px solid #ccc;}
.m h2,.m ul li{ height:25px; line-height:25px;}
.m h2{ font-size:12px; background:#f7f7f7; padding-left:5px;}
.m ul li{ list-style:none; border-top:1px dotted #ddd;
background:url(b1.gif) no-repeat 3px 50%; padding-left:20px;}
.m .list_1{ margin-bottom:5px;}
.m .list_1 span{ float:left; padding-right:8px;}
.m .list_1 span img{ border:1px solid #eee;}
.m .list_1 p{}
</style>

HTML代码

<div class="box"><div class="m">
<h2>CSSBBS图片+文字列表</h2>
<div class="p5"><div class="list_1">
<span><a href="http://www.865171.cn">
<img src="20007493_b.jpg" width="90" height="111" /></a></span>
<p><b><a href="http://www.865171.cn">CSS网站布局实录(第二版)</a>
</b><br />本书是一本讲述基于Web标准的应用CSS进行网站布局设计与
重构的典范之作。 本书以实例为主，一步步地告诉大家如何进行符合
Web 2.0标准的CSS布局设计...</p><div class="cle"></div>
</div><ul class="list_2">
<li><a href="http://www.865171.cn" target="_blank">
精通CSS+DIV网页样式布局(附光盘)</a></li>
<li><a href="http://www.865171.cn" target="_blank">
精通CSS：高级Web标准解决方案——图灵...</a></li>
<li><a href="http://www.865171.cn" target="_blank">
CSS禅意花园</a></li>
<li><a href="http://www.865171.cn" target="_blank">
HTML XHTML CSS 基础教程（第6版）</a></li>
<li><a href="http://www.865171.cn" target="_blank">
详解HTML&CSS&JavaScript 语法辞典（专...</a></li>
<li><a href="http://www.865171.cn" target="_blank">
HTML与CSS入门经典（第7版）</a></li>
<li><a href="http://www.865171.cn" target="_blank">
超越CSS：WEB设计艺术精髓</a></li>
</ul></div><h1>www.865171.cn</h1></div></div>