水平滚动的多列问题

Question

我有一个水平溢出设置为自动的父 div（主）。然后我有一个子元素（列），上面有我的所有列属性。问题是，一旦内容超出视口，我将无法再控制右侧边距或填充，因为该列似乎只到达视口。例如，当我在“列”上放置背景颜色时，即使内容滚动得更远，背景也只会到达视口的边缘。

.main {
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
}
.columns {
    background: red;
    column-fill: auto;
    column-width: 670px;
    column-gap: 80px;
    height: 120px;
    padding: 20px;
    width: auto;
}

<div class="main">
     <div class="columns">
           <p></p>
           <p></p>
           <p></p>
           <p></p>
           <p></p>
     </div>
</div>

这里是一个例子：http://jsfiddle.net/fyG24/

Answer 1

新答案：使用伪元素来帮助

根据您的 cmets，这里是 new the fiddle，我相信它可以满足您的需求。它添加了一个额外的div 包装.columns 我标记为.scroller，以及以下css：

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;    
}
.main {
    background: yellow;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.main:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 120px; /* match columns */
    background: red;
    z-index: 0;
}

.scroller {
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}


.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}


.columns > p:last-of-type:after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    float: right;
    margin-right: -20px;
    margin-top: -1px;
}

我在.main 中使用伪元素将.columns 的背景设置为您想要的显式高度，然后我还在最后一个p 中使用另一个伪元素来强制渲染最终20px 的列。无论占用多长时间或占用什么部分，它都应该起作用，并且在height: 1px 和margin-top: -1px，如果它正好位于一列文本的末尾，则不应生成新列。

原答案：移动溢出并设置右边距

要让background转移，你需要改变一些CSS，即：

.main {
    overflow: hidden;
    width: 100%;
}

.columns {
    overflow-x: auto;
}

这似乎是因为.column 背景受到.main 上的100% 宽度的限制，该宽度控制原始代码中的水平滚动条。通过将.main 完全隐藏，然后在.columns 上设置overflow-x: auto，滚动现在由.columns div 控制，并允许看到其background。

要解决最右侧没有填充的问题，我唯一能想到的就是添加以下内容：

.columns > p:last-of-type {
    margin-right: 20px;
}

这会在 .columns 的直接子元素的最后一个 p 元素上放置一个右边距，然后给出我假设你想要的外观。

这里是the fiddle modified（仅在 Firefox 中测试）。

Answer 2

仅通过将列 css 划分如下，我取得了更好的结果：

.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
}
.columns p {
    background: red;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}