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