教你一个最常用的前台小模块布局的最佳css解决方案，兼容IE8.0 7.0 6.0 Firefox3.5 2.0 google oprea 苹果浏览器等

虽然我是做后台的，但有时候难免要做些前台，最常设计的模块布局，如下图

原来我们用table布局时，不用说都很简单
但随着web2.0的到来，采用css布局，用不好还比较麻烦，一直以来，我都用浮动来定位那个“更多”的span ，这样有好多问题  浏览器兼容也众口难调
结构如下：
<div class="block">
<ul>
<li><h4>标题<h4><span class="more">更多<span><li>
</ul>
<div class="content">内容</div>
</div>

今天在开老外的一个站点的源代码时  发现了一个最佳解决方案
结构代码如下：

         < div  class ="box" >
           < h4 > 标题 </ h4 >
           < dl  class ="title" >
             < dd > 更多 </ dd >
           </ dl >
           < div  class ="content" >
          内容
           </ div >
         </ div >

css代码：

1      * {  margin : 0 ;  padding : 0 ; }
2      .box { width : 200px ; position : relative ; }
3      .box h4 { height : 26px ;  background : #f00 ;  line-height : 25px ; }
4      .title { position : absolute ;  top : 1px ;   right : 3px ; line-height : 25px ; }
5      .content { border : 1px solid #CCDFF2 ; overflow : hidden ; }

注意 *{ margin:0; padding:0;}是必须的  还有就是box的position:relative;是必须的  不然当你绝对定位“更多”时会出问题 
这样  我们要建这样的小模块  就很爽了  只要复制  修改  ，还可以在h4上用漂亮的背景图
好了附图我美化过的;

还不错吧？？？