html - CSS3 列 : how to get proper horz padding with overflow-x?

Question

所以，我正在尝试使用 CSS3 列并尝试在一堆水平列中布置内容，如果内容足够长，它会创建一个水平滚动页面。但是，我不希望内容紧靠视口(viewport)的左/右边缘，但我确实希望滚动条触及左/右边缘。我以为我可以用填充来做到这一点，最初看起来它工作得很好，直到我一直滚动到内容的末尾。

代码非常简单。 HTML:

<section id="content">
  <p>Lorem ipsum...</p>
  <p>And a bunch more paragraphs to overflow the viewport...</p>
</section>

还有 CSS:

#content {
    height: 400px;
    padding: 10px 50px;
    column-count: 2;
    column-gap: 50px;  
    -webkit-column-count: 2;
    -webkit-column-gap: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
}
#content p {
    /* just to make it easier to see the boundaries */
    background-color: rgba(255,0,0,0.1);
}

我还在这里设置了一个 fiddle :http://jsfiddle.net/uu9Tv/ .

我已经尝试了很多东西，但似乎没有什么能达到预期的效果...#content 上的边距导致滚动条无法到达视口(viewport)的两侧。

我还尝试了一种不同的方式，基本上让包装器 div 处理溢出/滚动并在 #content 元素上放置水平边距，但它似乎根本没有帮助。看这里:http://jsfiddle.net/vQLCz/ .

任何人都能够阐明如何在水平滚动布局中的分栏内容的最右侧获得一些空间？

Answer 1

你的方法是有道理的，但是 padding section#content不适用于溢出的内容。有列使得这更难看到，所以首先看我的例子 section#no-columns在 http://jsfiddle.net/ansonhoyt/wGKFa/ .该部分包含带有 nowrap 的段落.请注意填充如何限制背景颜色，而不是溢出文本。

当您将列添加到组合中时，填充仍然不适用于溢出的段落。一个好的替代方法是在 <p> 上留一个边距。 .这个解决方案是有限的。由于边距提供了正确的“填充”和“间隙”，因此它们都必须为 50px。

啊，CSS 的限制。 CSS3 列很好，但有限制……我们希望 CSS4 能添加一些更优雅的添加，例如 p:last-column { margin-right: 50px; } .