html - CSS 6 列设置问题

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>

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

然后让它变成 6 列？谢谢，我真的很陌生。

Answer 1

修改您的 html 以清理它:

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

请注意，我也简化了您的类(class)。没有必要实现你想要的。越简单越好!

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/