動易2006 DIV多列顯示問題的解決辦法

在DIV+CSS的頁面中，實現一行兩列或一行多列的頁面布局，主要是對系統標簽所輸出的代碼的進行樣式定義，包括寬度與對齊方式等，下面鐘對“文章列表DIV多列”、“循環欄目列表一行多列”兩種情況進行說明，其它相應DIV多列布局情況請按相同方式處理。
問題一：循環顯示欄目列表的多列顯示

模板代碼：
<div id="main_line">
<div style="display:inline;">
【ArticleList_ChildClass】【Cols=99】
</div>
<div id="r_box_list">
<dl>
<dt>
<a href="{$rsClass_ClassUrl}" target="_blank">
{$rsClass_ClassName}
</a>
</dt>
<dd>
<!--{$GetArticleList(ChannelID,rsClass_arrChildID,true,0,0,11,false,false,"",0,1,5,22,0,true,5,true,false,1,false,false,true,false,false,false,0,1,,,)}-->
</dd>
</dl>
</div>
<div style="display:inline;">
【/ArticleList_ChildClass】
</div>
</div>

模板代碼說明：
1：
<div style="display:inline;">
【ArticleList_ChildClass】【Cols=99】
</div>
與
<div style="display:inline;">
【/ArticleList_ChildClass】
</div>
是將欄目循環標簽輸入的代碼中，在DIV頁面不需要的多余代碼隱藏起來;

2：
<div id="main_line">
這個層是所有欄目列表的外框，它在瀏覽器中的實際寬度影響多列顯示的最終效果，比如需要它其中的r_box_list層按一行兩列顯示，那么r_box_list層的寬度必須大于main_line層的三分之一及不大于它的二分之一；

3：
<div id="r_box_list">
這個層是每一個欄目框的外框，主要是對它的寬度、對齊方式進行定義；

樣式定義：
#main_line,#main_line dl
{
Margin:0px;
Padding:0px;
Width:770px;
Clear:both;
}
#main_line dd
{
Margin:0px;
Padding:0px;
}
#r_box_list
{
Width:330px;
Float:left;
Height:200px;
overflow: hidden;
}

樣式說明：
1：在知道main_line的實際寬度后，再按需要定義r_box_list的寬度，如果是按一行三列顯示，那么r_box_list層的寬度是：大于main_line層的四分之一并不少于它的三分之一。
2：再將r_box_list層的對齊方式設為左對齊：float:left；。
3：設置r_box_list層的高度，并保證其在實際顯示時被撐開，防止出現意想不到的效果，最好再加上overflow: hidden;定義。

問題二：文章列表多列顯示


模板標簽調用：
<div id="r_box_chan">
<dl>
<dt>{$ClassName}{$ChannelShortName}</dt>
<dd><!--{$GetArticleList(ChannelID,arrChildID,True,0,ShowAllItem,0,False,False,"",0,ItemListOrderType,5,45,0,True,1,True,false,3,False,False,False,True,True,True,ItemOpenType)}--></dd>
</dl>
</div>

模板說明：
1：Main_line 、R_box_chan兩個層的用跟上一問題中Main_line相同，在這一問題中，要確定最里面層的實際寬度；標簽中，紅色“5”表示輸出的代碼為DIV格式；
2：輸出的代碼是如下框架
<div id="r_box_chan">
<dl>
<dt>標題</dt>
<dd>
<div class="listbg">奇數行</div>
<div class="listbg2">偶數行</div>
</dd>
</dl>
</div>

樣式定義：
#r_box_chan,#r_box_chan dl
{
margin:0px;
padding:0px;
clear:both;
}
#r_box_chan dd
{
Margin:0px;
Padding:0px;
}
#listbg,# listbg2
{
float:left;
width:340px;
overflow: hidden;
height:23px;
line-height:23px;
}

樣式定義：
其樣式定義的原理與上一問題相同，在#listbg與# listbg2兩個層的定義中：
overflow: hidden;height:23px;line-height:23px;防止列表中有換行的現像。