php循环输出css一行两列,封面模板循环子栏目一行两列DIV+CSS成功实现

古城微笑少年丶 2022-11-17 14:34 163阅读 0赞

大致思路是：主体部分(总宽度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！

封面模板

当前位置：\[!--newsnav--\]

\[listsonclass\]'selfinfo',5,40,0,0,13,0,0,0\[/listsonclass\]

右侧宽度250不管它了

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 \{系统自定义｝

循环子栏目标签模板：

页面模板内容(\*)

\[!--the.classname--\] 更多>>

\[!--empirenews.listtemp--\]\[!--empirenews.listtemp--\]

列表内容模板(list.var) (\*)——没有改变

\[!--title--\] \[!--newstime--\]

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 89 - Python一行代码实现循环移位

汇编语言中有一种移位指令叫做循环左移（ROL），现在有个简单的任务，就是用字符串模拟这个指令的运算结果。对于一个给定的字符序列S，请你把其循环左移k位后的序列输出。例如，字符

比眉伴天荒/ 2023年07月19日 05:59/ 0 赞/ 14 阅读

相关 numpy一行转为一列

>>> a = np.array([1, 2, 3]) >>> a = a.reshape(-1, 1) -1表示任意行数，1表示1列 >>> a

青旅半醒/ 2022年12月31日 05:21/ 0 赞/ 173 阅读

相关 python 一行内容，变成多列（一行变多列）

原内容：11111、222222、3333333333333、44445、555、66666666666、777777 想把一行变成多列本文分两种：第一种：拆分

水深无声/ 2022年12月23日 15:25/ 0 赞/ 248 阅读

相关 php循环输出css一行两列,封面模板循环子栏目一行两列DIV+CSS成功实现

大致思路是：主体部分(总宽度980)分左右浮动(.vmain\_l和 .vmain\_r)，右侧宽250，左侧自然是980-250=730了。右侧不管它了，可以添加版块内容

古城微笑少年丶/ 2022年11月17日 14:34/ 0 赞/ 164 阅读

相关 python分两列输出_python分两列输出

分割成一个包含两个元素列表的列对于一个已知分隔符的简单分割(例如，用破折号分割或用空格分割).str.split() 方法就足够了。它在字符串的列(系列)上运行，并返回

小咪咪/ 2022年11月05日 08:58/ 0 赞/ 288 阅读

相关 CSS两双列布局

1、使用绝对定位 .aside{ position: absolute; top: 0; left: 0;

谁借莪１个温暖的怀抱￠/ 2022年06月14日 07:47/ 0 赞/ 225 阅读

相关循环队列的模板实现(参考用)

循环队列的插入应该遵循这么一个公式来判断插入的位置 pos = (pos + 1) % length; 其中length表示元素的个数循环队列中应该具有的元素如下:

缺乏、安全感/ 2022年05月12日 08:00/ 0 赞/ 185 阅读

相关 DIV+CSS布局一行两列问题（Repeater布局）

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码 < div > < asp:Repeater ID =

柔情只为你懂/ 2021年12月24日 15:17/ 0 赞/ 297 阅读

相关 BootStarp一行两列

<div class="form-group"> <label class="col-sm-2 control-label" th:utext="\\{applicati

ゝ一世哀愁。/ 2021年09月28日 06:04/ 0 赞/ 303 阅读

相关 Java数组实现循环队列的两种方法RingBuffer

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Victor\_Cindy1/article/details/46604575

爱被打了一巴掌/ 2021年09月19日 17:12/ 0 赞/ 631 阅读