如何在jQuery Columnizer中增加固定列數的填充而不將最後一列踢到下一個「行」

Question

我已經爲jQuery columnizer編寫了腳本。一切工作正常與一個值得注意的例外：

我想修復的列數爲3，並增加填充10px。由於現在的佈局，我不滿意在成型後立柱的緊密程度。

當我使用CSS來調整填充，最後一列被推出，並且踹倒：

代碼：

<script> 
$(function(){ 
     $('#sectionID').columnize({ columns: 3 }); 
}); 
</script> 
<style type="text/css"> 
.column{padding:10px; } 
</style> 

任何意見或建議嗎？

謝謝！

/布賴恩

Answer 1

我已經找到了解決這個問題的最好辦法是將填充添加到列，而不是裏面的元素。它將取決於你擁有的內容。如果在列中只有段落，則將規則更改爲.column p就足夠了。

最簡單的方法是使用一個子選擇器和填充用添加到項目列裏：

.column > * { padding: 10px } 

應該針對人們的需求爲柱填充90％的工作，但要注意，因爲它的添加到列的子節點，它將爲每個元素添加頂部/底部填充，而不僅僅是添加到列 - 這可能不是期望的。

另一個選項（需要額外的標記）是將div添加到要分欄的容器中，然後將填充添加到該新的div。因此，而不是：

<div id=sectionID> 
... content to columnize ... 
</div> 

你必須：

<div id=sectionID> 
<div class=for_padding> 
... content to columnize ... 
</div> 
</div> 

和你的CSS是：

.column .for_padding { padding: 10px; } 

你還是會columnize的sectionID DIV，並columnizer將添加<div class=for_padding>包裹每列的內部。

Answer 2

你可以簡單地使用

box-sizing: border-box; 
padding: 0 4%; 

爲您列。如果您不喜歡容器左側和右側的缺口，請將

margin: 0 -2%; 

添加到您的容器。