jquery - 如何在具有固定列数的 jQuery Columnizer 中增加填充，而不会将最后一列向下踢到下一个“行”

Question

我已经为 jQuery columnizer 编写了脚本。一切正常，但有一个值得注意的例外：

我想将列数固定为 3 并将填充增加到 10px。就目前的布局而言，我对柱子在成型后的紧绷程度并不满意。

当我使用 CSS 调整填充时，最后一列被推出并踢下：

代码：

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

有什么想法或提示吗？

谢谢！

/布莱恩

score 2 · Accepted Answer

我发现解决此问题的最佳方法是将填充添加到列内的元素中。这取决于您拥有的内容。如果列内只有段落，那么将规则更改为.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; }

您仍然需要对sectionIDdiv 进行分列，并且 columnizer 会将其添加到<div class=for_padding>每个列的内部。

score 1 · Accepted Answer

你可以简单地使用

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

为您的专栏。如果您不喜欢容器左侧和右侧的间隙，请添加

margin: 0 -2%;

到你的容器。

2 回答 2