软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 建站程序 > CMS教程 > 动易2006 DIV多列显示问题的解决办法

动易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;防止列表中有换行的现像。
    相关阅读
    栏目导航
    推荐软件