`
mengdejun
  • 浏览: 410277 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

dedecms列表页多列显示实例CSS

    博客分类：
  • Cms
CSSXHTMLHTML 
阅读更多 
<!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比例即可以实现多列显示.

 

 

 

分享到：
| JS获取上传文件缩略图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics