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柱安裝問題

回答

相關問題