CSS 3列設置問題

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國防部這樣做爲這些容器。

像這樣：

<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%; }