CSS 6柱安装问题

我怎么会借此：CSS 6柱安装问题

<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列？谢谢，我真的很新。

来源

2014-05-19 user3646836

看起来这是一个3列设计的模板脚本。你有权访问CSS文件吗？ –

有很多方法可以做到这一点，我们可以让你的代码在Jsfiddle上，这样我们就可以玩耍了。一个诀窍就是在这33.33％列中的每一列中创建一个表格分隔符，以便为您提供2列效果。 –

返修您的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>

注意，我简化你的类为好。没有必要实现你想要的。简单更好！

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 */ 
}

小提琴：http://jsfiddle.net/N39VM/

来源

2014-05-19 22:57:11

非常感谢你的出色工作，但是栏目都集中在屏幕上，但是箱子有点全面，希望它们成为连续的继承人，看起来像是什么样的图像http://s2.postimg.org /o9uqnpk21/Untitled_2.jpg我该如何解决这个问题？谢谢 – user3646836

要注意的一件事是可以出现在两个内嵌块元素之间的额外空白区域，它可以为行添加足够的宽度以强制元素将（意外）包裹到第二行。避免这种情况的方法是在源代码中将所有内联块元素保持为一行。最后，如果对宽度使用更高的精度（例如16.666666），则会更好地满足父容器的整体宽度（接近100％）。 –

@ user3646836 - 在* parent *上留下文本对齐中心，并将左边的文本对齐添加到'div.column'，这将清理要排列的内容。 –

下面是使用浮点数的解决方案。

对于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; 
}

和HTML看起来是这样的：

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

如果你有超过6个输入字段，那么第二组6个元素将开始在第二排，这可能是一个不错的选择。

如果您想添加边框和填充，box-sizing属性很有用。

width的值应该足够精确，以确保填充宽度的列的行数为。

见演示在：http://jsfiddle.net/audetwebdesign/WpuFL/

注：我只是想说明如何将CSS可以工作。您仍然需要在模板脚本代码中实现它。

来源

2014-05-20 00:33:54

CSS 6柱安装问题

回答

相关问题