CSS 6 numéros configuration de la colonne

Question

Comment pourrais-je prendre ceci:

<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> 

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

Et faire 6 colonnes? Merci, je suis vraiment nouveau à ce sujet.

Answer 1

Retravailler votre code html un peu pour le nettoyer:

<div class="center"> 
    <!-- Removed the <p> tag - it contains <div> elements, which don't belong within <p> elements --> 
    {foreach key=num item=listtld from=$tldslist} 
     <!-- Removed the class if/else conditions. Simplify to one class - column --> 
     <div class="column"> 
      <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}> 
      {$listtld} 
      {if $num % 5 == 0} 
      {/if} 
     </div> 
    {/foreach} 
</div> 

Remarque, je simplifie vos classes ainsi. Pas nécessaire pour réaliser ce que vous voulez. Simple c'est mieux!

CSS:

div.column { 
    width: 16%;      /* approximately 1/6 */ 
    display: inline-block; 
    zoom: 1;      /* ie-7 hack for inline block to work */ 
    *display: inline;    /* ie-7 hack for inline-block to work */ 
    border: 1px solid red;   /* temporary - to clearly show the box */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* to prevent padding issues if you add padding */ 
    margin: 0;      /* to ensure the right width */ 
    vertical-align: top;   /* to line them up evenly across the top */ 
} 

Fiddle: http://jsfiddle.net/N39VM/

Answer 2

Voici une solution en utilisant des flotteurs.

Pour le CSS:

div.column { 
    width: 16.66666666666666666666%; 
    float: left; 
    border: 1px dotted gray;  /* temporary - to clearly show the box */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

et le code HTML ressemblerait à quelque chose comme:

<div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div> 
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>  
</div> 

Si vous avez plus de 6 champs d'entrée, puis le second ensemble de 6 éléments commencera sur un deuxième rangée, ce qui peut être une bonne option.

La propriété box-sizing est utile si vous souhaitez ajouter des bordures et des remplissages.

La valeur width doit être suffisamment précise pour s'assurer que les colonnes remplissent la largeur.

Voir la démo à: http://jsfiddle.net/audetwebdesign/WpuFL/

Note: Je suis juste montrer comment le CSS pourrait fonctionner. Vous devez toujours l'implémenter dans le code de script modèle .