2

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

代码非常简单。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);
}

​ 我还在这里设置了一个小提琴：http: //jsfiddle.net/uu9Tv/。

我已经尝试了很多东西，但似乎没有任何效果...... #content 上的边距导致滚动条无法到达视口的两侧。

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

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

4

1 回答 1

1

您的方法很有意义，但填充section#content不适用于溢出的内容。有列会使这更难看，所以首先看看我section#no-columns在http://jsfiddle.net/ansonhoyt/wGKFa/中的示例。该部分包含一个带有 的段落nowrap。请注意填充如何约束背景颜色，而不是溢出的文本。

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

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

于 2012-11-09T15:04:59.833 回答