DIVCSS5模块上标题下(左图片右简介)DIV CSS布局

DIVCSS5模块上标题下(图片简介)DIV CSS布局完整HTML+CSS代码，实例模块布局教程，图文在线演示，完整案例压缩包下载。

上下结构上标题下（左图右简介）DIV CSS模块效果截图

这样的布局在实际中常遇到，这里DIVCSS5以单独一个这样的局部模块为布局实例对象。上为文章标题、下结构为左边图片右边简介局部。

一、DIVCSS模块分析 - TOP

遇到这样的CSS布局首先要分析其结构首先从上到下分析为上下结构，上为文章标题，下右分为左右结构其中左边为图片，右边为简介内容。

常见用到DIV布局结构，上标题可以使用h3标签，下左边图片可以直接对img标签设置靠左float:left样式，右边简介可以使用一个div标签布局。

布局这样的首先考虑到标题、简介、图片等宽度高度是否有限制，通常为了实践布局对齐一般标题宽度高度、图片高度宽度、简介高度宽度均固定死，内容可少可多，但内容多时候不能超出各自盒子范围。这个时候对标题、简介局部设置CSS高度、CSS宽度同时设置隐藏超出溢出内容样式Overflow:hidden。

这里模块中的简介一般最多显示多少个字数通常通过程序控制从数据库调用多少个字，所以后面的省略号是手动加入的，并程序限制死最多显示多少个文字，我们CSS DIV布局时，不要超出字数即可。

二、DIV CSS模块布局所需准备 - TOP

1、初始化模板准备
为了兼容各大浏览器仍然使用DIVCSS5提供初始化模板，在此基础上进行此模块的布局。以免不兼容各大浏览器。

在提供初始化模板基础上进行基础修改，以适应本局部模块CSS布局。

2、图片素材
本实例模块没有其它图标图片素材，只有一个图片内容，只需要切出使用即可，这里命名为“i90x60,jpg”，保存到images文件夹里即可。

三、DIV+CSS模块布局关键代码与效果截图 - TOP

1、关键HTML代码

<div class="warp-box"> 
    <h3><a href="#">文章标题 总价过亿元天价豪车盘点</a></h3> 
    <div class="box"> 
        <a href="#"><img src="images/i90x60.jpg" /></a> 
        <div> 
            召开了14年秋季拍立得新品发布会，发布了两款全新的拍立得新品及五款特别款新品 
            ......[<a href="#">详情</a>] 
        </div> 
    </div> 
</div>

因为在.box盒子里div和img标签为此盒子唯一标签，所以没有再单独给予加入class命名，直接对标签设置CSS样式。

2、关键CSS代码

a:hover,.warp-box h3 a:hover,.warp-box .box div a:hover{color:#FF8C04} 
 
.warp-box{ margin:0 auto; width:280px} 
.warp-box h3{height:46px; line-height:46px; font-weight:bold; 
font-size:14px; font-family:"\5FAE\8F6F\96C5\9ED1"} 
.warp-box h3 a{ color:#388FEC} 
.warp-box .box{ overflow:hidden} 
.warp-box .box img{ float:left; width:90px; height:60px} 
.warp-box .box div{ float:right; width:180px; height:60px; line-height:20px; text-align:left} 
.warp-box .box div a{ color:#5C5B58}

3、效果截图

模块局部CSS+DIV布局效果截图