教你一個最常用的前台小模組布局的最佳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上用漂亮的背景圖
好了附圖我美化過的;

還不錯吧？？？