GetArticleList以div输出定义一行四列效果

文章列表标签GetArticleList以div格式输出如何定义一行四列效果？如果四列的总宽度为720，应该怎样定义？是在上边基础上加呢，还是另写？

　　这个解决方法请先参阅《CssNameA、 CssName1和 CssName2自定义CSS参数使用实例》篇文章看一下并理解相应输出效果，然后重点看修改五：显示方式为5（输出DIV式）这一段，下面我们重点以这一段为例解决这个的问题。

　　在模板中您若定义了以下最新文章代码：

<table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            </td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>

　　其中红色5为DIV输出方式；红色1是列数，即使这里您改成4，页面也不会出现您所需要的四列的效果，因为div输出格式并不受这个控制列数参数的影响。要想显示四列的效，您必需控制输出时每个div的宽度。

　　例：以上面模板中的代码输出后，在前台页面源代码查看，可以看到以下代码：

前台网页代码：
      
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <table width="100%" cellpadding="0" cellspacing="0"><tr><div class="LinkAbg01"><img src="/Article/images/article_ontop7.gif" alt="固顶文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a>[3月27日]</div><div class="LinkAbg02"><img src="/Article/images/article_elite7.gif" alt="推荐文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0－－新一波互联网大潮的到来" target="_blank">Web2.0－－新一波互联网大</a>[4月12日]</div>
……

　　请注意红色的部分，<div class="LinkAbg01">、<div class="LinkAbg02">表示这二个区块是受样式LinkAbg01、LinkAbg02所控制。假设您这里可允许文章显示的总宽度为720px，这时您应该定义LinkAbg01、LinkAbg02的宽度为720px的1/4或更小（宽度小于1/4是因为如果您在横向二个div区块中有间距时，要将间距考虑在内），这样当显示到第5个div区块时页面就会自动会换行以循环显示下一个四列……显示样式依此类推。蓝色的class="LinkA" 是定义了有链接文字的a.样式名，您可以通过定义a.LinkA这样的CSS控制有链接文字的样式。
　　即，在CSS定义中，您应该这样定义LinkAbg01、LinkAbg02的样式：

.LinkAbg01, .LinkAbg02 { width:180px; overflow:hidden; float:left;}

　　完整的CSS样式定义为：

完整的CSS样式定义：
/* 请注意以下定义中，第12个参数 ShowType -----显示方式，1为普通样式，2为表格式，3为各项独立式，4为智能多列式，5为输出DIV，6为输出RSS ，以下的设置对2和3都会有效。*/
/* ******LinkA表示首页最新文章中带有链接的文字的风格样式，带下划线****** */
a.LinkA:link {color: #0000ff;text-decoration: underline;}
a.LinkA:visited {color: blue;text-decoration: underline;}
a.LinkA:hover{color: #ff0000;text-decoration: underline;}
a.LinkA:active {color: blue;text-decoration: underline;}

/* ******首页最新文章中间隔各行的风格样式，分奇数行与偶数行****** */
.LinkAbg01 /* --奇数行文章列表内容间隔颜色的定义1-- */
{
background:#E3F0FB;color:#F500D0;
}
.LinkAbg02 /* --偶数行栏目文章列表内容间隔颜色的定义2-- */
{
background:#F6FAFE;color:#ff0000;
}
.LinkAbg01, .LinkAbg02 { width:180px; overflow:hidden;float:left;}

　　这里的“width:180px;”表示定义了class为LinkAbg01、LinkAbg02的宽度180px只能是小于或等于720px的1/4（这里的宽度根据您的实际情况进行调试与定义即可），以方便界面中显示四列循环效果。
　　 overflow:hidden;表示如果里面的文章标题超过了170px则隐藏，以防止标题过长而撑开超过170px（如果您仅仅要隐藏超过宽度的内容，也可以写成overflow-x:hidden;）
　　 float:left;表示使div区块对象浮在左边，不加此定义默认样式为单行排列，不是我们想要的效果（不加float:left;的效果见下图）：

　　好了，加上样式定义后，看一下前台浏览效果显示的效果：

　　这时，已经实现了GetArticleList以div输出定义一行四列效果。但是若文章标题的字数没有很好控制，则会显示自动回行的状态。您可以进一步加上div样式的高度定义：

.LinkAbg01, .LinkAbg02 { width:180px; overflow:hidden;float:left; height:24px; line-height:24px;}

　　加上高度定义后前台效果显示效果：

　　这时，就能完美显示我们所要的效果了。增加的CSS定义中，height:24px; line-height:24px;是定义了一行div区块的高度及里面的行高为24px，您可以根据自己所需的效果进行设置.