从 CSS3 多列项中删除额外的填充，如何？答案

【问题标题】：Remove Extra padding from CSS3 multi-column items, how?从 CSS3 多列项中删除额外的填充，如何？
【发布时间】：2014-08-18 06:30:53
【问题描述】：

我正在尝试使用 CSS3 多列创建砌体布局，但遇到了一些问题。最后一项有额外的填充，将底部元素推到底部。我想删除额外的底部填充，以便多列元素对其下方的元素具有更窄的底部填充。这是我希望将其移除的底部填充。

这是我的问题的图像：

这是标记。

<div class="span8" id="content-wrapper">

  <div class="content" id="container">
    <article class="item"> ... </article>
    <article class="item"> ... </article>
    <article class="item"> ... </article>
    <article class="item"> ... </article>
  </div>

  <nav class="pagination loop-pagination">
    <a class="prev page-numbers" href="#">Previous</a>
    <a class="page-numbers" href="#">1</a>
    <span class="page-numbers current">2</span>
    <a class="page-numbers" href="#">3</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="#">5</a>
    <a class="next page-numbers" href="#">Next</a>
  </nav>

</div>

.content {
    overflow: hidden;
    column-count: 2;
    -webkit-column-count: 2;
    column-gap: 25px;
    -webkit-column-gap: 25px;
    column-fill: auto;
    -webkit-column-fill: auto;
}
.item {
    margin-bottom: 3em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

这是JSFiddle。有可能这样做吗？谢谢。

编辑：

如果可能，我想保留 column-break-inside: Avoid; ，如果里面的分栏被删除，内容就会被截断。

http://imgur.com/RRrST41

另外，根据内容大小，额外的底部内边距也会有所不同。我只想让它表现得像 jQuery Masonry。

谢谢。

【问题讨论】：

把
放在一个带有
的 div 中
尝试减少 .pagination 中的边距，如下边距顶部：-8em;。 jsfiddle.net/urztrauk/1

标签： html css multiple-columns

【解决方案1】：

试试这个：

.item {
    margin-bottom: .90em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid; }

更新小提琴：

http://jsfiddle.net/amitkansal/urztrauk/2/

【讨论】：

或者你可以减少你的margin-bottom：1.1em到你需要的0.80或更少。
嗨，我想将 .item 底部边距保持在 3em 或 48px 左右。使其看起来符合设计中的规定。
请指正如果我错了，你想减少两个项目之间的空间..对吗？
我想要做的是减少最底部砌体项目与导航菜单之间的底部填充。

【解决方案2】：

在你的css中评论一行：DEMO

.item {
    margin-bottom: 3em;
    /*-webkit-column-break-inside: avoid;---------->>>>> commented*/
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

如果满足您的要求，也会更新一行：DEMO

.item {
    margin-bottom: 86px;/*------------>>>>>>>>>> updated*/
    /*-webkit-column-break-inside: avoid;---------->>>>> commented*/
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

【讨论】：

是否可以保留 -webkit-column-break-inside: 避免？这个错误imgur.com/RRrST41 在被评论时发生。另外，我想将 .item margin-bottom 保持在 3em 或 48px 左右。

【解决方案3】：

我找到了这样的解决方案，它对我有用

.content {
    -webkit-padding-after: 0;
}

【讨论】：