也许您经常会看到很多网站上都有左图片右标题和简介的布局版块，这种布局非常美观，一般都是通过DIV+CSS技术实现的，适合于很多大中小型网站。在网页制作中，你也可以在自己的网站上实现这样的布局，实现起来也很简单，在这里，我们郑州网站建设公司利用DIV+CSS技术，写出了实现这种布局的代码，在下面列出来，并附带有执行后的图片截图，可供各位编码时参考。本例中的代码我们郑州网站建设公司已经在IE、Chrome、360浏览器等主流浏览器上测试通过。下图是执行实例代码后的图示：
下面是完整的实例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用DIV+CSS实现左图片右标题和简介的布局（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style type="text/css">
.divclass{ margin:0 auto; width:330px; overflow:hidden}
.divclass img{ float:left; width:110px; height:75px}
.divclass .right{ float:right; width:210px; text-align:left}
.divclass .right h3{ height:22px; line-height:22px; font-size:14px; display:inline; overflow:hidden;}
.divclass .right div{ height:60px; font-size:12px; margin-top:8px; overflow:hidden;}
.divclass .right div span{color:#353535}
</style>
</head>
<body>
<div class="divclass">
<a href="http://www.kxcom.cn/"><img src="images/seo.jpg" /></a>
<div class="right">
<h3><a href="http://www.kxcom.cn/">我们郑州网站建设公司的SEO网站优化服务介绍</a></h3>
<div>我们郑州网站建设公司对外提供各网站SEO优化服务，为用户网站提供全方位诊断和SEO优化，提升网站权重和关键词排名...<span><a href="http://www.kxcom.cn/">[详细]</a></span></div>
</div>
</div>
</body>
</html>
