效果在下边,大致思路是:主体部分(总宽度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--]<!--list.var1-->[!--empirenews.listtemp--] </ul> </div> </div>
列表内容模板(list.var) (*)——没有改变 <li><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a> <span>[!--newstime--]</span></li>
上传以下图片:
|