[已解决]封面模板循环子栏目一行两列DIV+CSS成功实现帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → [已解决]封面模板循环子栏目一行两列DIV+CSS成功实现

【本版专题贴子】

1/7 1 2 3 4 5 6 7 ›› ›|

残阳如血
用户头衔：进士

精华贴   ：0
发贴数   ：399
经验值   ：1998
注册时间：2006-06-08

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[已解决]封面模板循环子栏目一行两列DIV+CSS成功实现

效果在下边，大致思路是：主体部分（总宽度980）分左右浮动（.vmain_l和 .vmain_r），
右侧宽250，左侧自然是980-250=730了。右侧不管它了，可以添加版块内容。
左侧宽730分配，上边的“当前位置”720宽，与右侧边距10。
下边的循环部分是，每个子栏目设为左浮动，355宽，右边距10，这样两列宽度就是355*2+10+10=730，正好。
如果循环子栏目部分在总页面右侧，那就设置左边距为10即可，还是左浮动。

这样完美解决了循环栏目与“当前位置”上下照不齐的问题和子栏目间间距问题。
经测试，在IE8,FF,TT浏览器下正常！！！

举一反三，一行N列都是这个方法！

注意：[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]里边的13，是我复制系统循环子栏目标签模板后，新建立的循环子栏目标签模板ID，不是系统自带的7！

封面模板

<div class="vmain">
  <div class="vmain_l">
<div class="position">当前位置：[!--newsnav--]</div>
[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]
  </div>
  <div class="vmain_r">右侧宽度250不管它了</div>
</div>

CSS：

.vmain_l {
float: left;
   width: 730px;
}
.vmain_r {
float: right;
width: 250px;
}
.position {
      line-height: 28px;
      background: url(/skin/default/images/title_bg1.jpg) repeat-x;
      height: 28px;
      width: 698px;
      margin-bottom: 10px;
      padding: 0px 10px;
      border: 1px solid #DEDEDE;
}
.vxh {
width:355px;
float: left;
margin-right: 10px;
}
.vxh_title {
      line-height: 28px;
      background: url(/skin/default/images/title_bg1.jpg) repeat-x;
      height: 28px;
      width:343px;
      float:right;
      text-align:right;
      padding-right:10px;
      border: 1px solid #DEDEDE;
}
.vxh_title span {
      float:left;
      font-weight:bold;
      width:70px;
      height:28px;
      display:block;
      text-align:center;
      padding-left:10px;
}
.box {系统自定义｝

循环子栏目标签模板：

页面模板内容(*)
<div class="vxh">
<div class="vxh_title"><span>[!--the.classname--]</span><a href="[!--the.classurl--]">更多>></a></div>
<div class="box">
<ul>
[!--empirenews.listtemp--][!--empirenews.listtemp--]
</ul>
</div>
</div>

列表内容模板(list.var) (*)——没有改变
<li><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a> <span>[!--newstime--]</span></li>

上传以下图片：