html5文章标题定格,如何用DIV+CSS实现文章标题灵活排布

以前网页制作者在制作标题列表时，通常使用table的tr进行换行、使用td进行换列。这种方式在可预见标题长度并规划好网页布局的情况下，确实可以使网页布局美观。但是，由于不可预知管理员输入标题的长度，这种方式要么产生一大堆空白，要么产生很难看的换行，即便后台可以设置每行每列显示条数和截取文字，仍不能达到完美效果。

现在，DIV+CSS技术已经越来越普及，只要在模版中采用DIV+CSS技术进行制作，可以不必对程序进行修改，轻松实现标题紧密排布、自动双列多列显示标题。有HTML网页制作经验者可以通过修改模版，尝试这样的制作模式。

例一：标题紧密排布

新建一个模版tpl_auotlist.htm，模版内容为：

• { #title# }

通过后台页面设置，选择一个文章列表插件，设置其采用tpl_autolist.htm ，可以看到紧密排列的效果。如下图

例二：标题双列排布新建一个模版tpl_doublelist.htm，模版内容为：

• { #title# }

通过后台页面设置，选择一个文章列表插件，设置其采用tpl_doublelist.htm ，可以看到双列排列的效果。如下图:

该制作方法同样适合于文章列表，商贸系统的企业列表等所有标题列表。