Question

我正在创建一个页面流，该页面流将相当数量的内容分解为根据需要堆叠在右侧的列。换句话说，我正在尝试创建仅水平滚动的布局。使用CSS columns属性很容易。我有一些类似的标记

<div class="document-flow">
  <p>Some text</p>
  <p>A lot more text</p>
  ...
</div>

和CSS

.document-flow {
  box-sizing: border-box;
  padding: 5rem;
  height: 100vh;
  width: 100vw;

  columns: 25rem;
  column-fill: auto;
  column-gap: 3rem;
}

基本上可以提供我想要的效果。有了足够的内容，我可以向右滚动以查看我的所有列。

但是，当我一直滚动到末尾时，最后一列直接位于浏览器的右边缘。当然，由于此列的布局构成溢出，因此不适用于容器的填充。看起来不太好。

我希望它在右侧具有相同的5rem填充，但是我还没有找到一种方法。

我得到的最接近的结果是在流的末尾添加一个伪元素，该元素总是比列宽宽5 rem。（我有a demo of this layout in CodePen。）

.document-flow::after {
  content: '';
  display: inline-block;
  width: calc(100% + 5rem);
}

不幸的是，这似乎仅在Firefox中有效。 Chrome和Safari只是剪切了这个较宽元素的额外宽度，而没有让用户滚动查看它。

我已经考虑过this similar question可能有什么帮助，方法是为padding-right的所有直接子代添加内部.document-flow。我宁愿不这样做，因为页面末尾的间距不能大于列之间的间隔（因为填充也将应用于中间列）。

Answer 1

尝试：

.document-flow {
     -webkit-column-count: 5;
     width: 1300px;
     column-rule-style: solid;
     padding: 20px;
     column-gap: 40px;
 }

对溢出的CSS多列布局进行右移

1 个答案: