Question

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

.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

新答案：使用伪元素帮助

根据您的评论，我认为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的背景设置为您想要的显式高度，然后我还在最后{{1}中使用了另一个伪元素强制渲染列的最后20px。它应该有效，无论它占用多长时间或哪个部分，并且在p和height: 1px它不应该生成一个新列，如果它落在一列文本的末尾。

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

要让margin-top: -1px转移，您需要更改一些CSS，即：

background

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

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

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

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

这是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;
}

水平滚动的多列问题

2 个答案:

新答案：使用伪元素帮助

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