<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表页多列显示</title> <style type="text/css"> <!-- * body{text-align:center;padding:0 0;font:Georgia, "Times New Roman", Times, serif;} div{display:block;position:relative;} #container{width:80%;margin:0 auto;text-align:center;clear:both;} .article{width:30%;float:left;text-align:center;border:1px double rgb(110,132,252);} --> </style> </head> <body> <div id="container"> <div class="article">1</div> <div class="article">2</div> <div class="article">3</div> <div class="article">4</div> <div class="article">5</div> <div class="article">6</div> <div class="article">7</div> <div class="article">8</div> <div class="article">9</div> <div class="article">10</div> <div class="article">11</div> <div class="article">12</div> <div class="article">13</div> <div class="article">14</div> <div class="article">15</div> <div class="article">16</div> <div class="article">17</div> </div> </body> </html>
dedecms,列表页默认为单列显示,但开发中却要用到多列,其实最简单的方法便是通过CSS,控制列生成方式,.artcile width比例即可以实现多列显示.