动易2006 DIV多列显示问题的解决办法

概述在DIV+CSS的页面中，实现一行两列或一行多列的页面布局，主要是对系统标签所输出的代码的进行样式定义，包括宽度与对齐方式等，下面钟对“文章列表DIV多列”、“循环栏目列表一行多列”两种情况进行说明，其它相应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,11,false,"",1,5,22,)}-->
</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,ShowAllitem,False,ItemListOrderType,45,3,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;防止列表中有换行的现像。
总结

以上是内存溢出为你收集整理的动易2006 DIV多列显示问题的解决办法全部内容，希望文章能够帮你解决动易2006 DIV多列显示问题的解决办法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。