Question

有一个问题让一些域名在3列设置中很好地排队，我现在尝试了一点但没有成功，我是一个新手。代码如下

TPL文件

<div>
                <p class="center">{foreach key=num item=listtld from=$tldslist}
    <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
      {$listtld}
    {if $num % 5 == 0}
    {/if}{/foreach}</p>
            </div>

和CSS

.center {
text-align: center;

和

 p {

}

我在这里缺少什么？或者我如何才能实现这一点并让它在移动设备上看起来不错，而不是像雪球一样蜷缩在一起？谢谢

（我确定你们都知道这一点，但是很多事情都是如此，所以我想我需要创造一个不同的css。对不起，请原谅我的无知。我是新的对此）

Answer 1

不确定这是否是您想要的结果，但您可以尝试使用this stackoverflow question中的答案，只需使用计数器并根据其模态为每列分配所需的类。

<div>
     <p class="center">
        {foreach key=num item=listtld from=$tldslist}
          <div class="{if ($num+1) % 3 == 1}column-left{elseif ($num+1) % 3 == 2}column-center{elseif ($num+1) % 3 == 0}column-right{/if}">
              <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
              {$listtld}
              {if $num % 5 == 0}
              {/if}
          </div>
       {/foreach}
    </p>
</div>

CSS：

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

修改

对于6列网格尝试使用两个容器来分隔3列网格，您可以使用6的mod来为这些容器执行此操作。

像这样：

<div> <p class="center"> {foreach key=num item=listtld from=$tldslist} {if ($num+1) % 6 == 1} <div class="container-left"> {else if ($num+1) % 6 == 4} <div class="container-right"> {/if} <div class="{if ($num+1) % 3 == 1}column-left{elseif ($num+1) % 3 == 2}column-center{elseif ($num+1) % 3 == 0}column-right{/if}"> <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}> {$listtld} {if $num % 5 == 0} {/if} </div> {if ($num+1) % 3 == 0}</div>{/if} {/foreach} </p> </div>

CSS：

.column-left{ float: left; width: 30%; } .column-right{ float: right; width: 30%; } .column-center{ display: inline-block; width: 30%;} .container-left{ float: left; width: 50%; } .container-right{ float: right; width: 50%; }

CSS 3列设置问题

1 个答案: