水平滚动的多列问题

Question

我有一个父div(主),水平溢出设置为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

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

根据您的评论,这里是我认为满足您的愿望的小提琴.它添加了我标记的额外div包装,以及以下css:.columns.scroller

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将.columnsset 的背景赋予你想要的显式高度,然后我还在最后使用另一个伪元素p来强制渲染列的最后20px.它应该工作,无论多长或哪一部分需要了,在height: 1px和margin-top: -1px如果它落在就在一列文本结束,应该不会产生一个新列.

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

要获得background转移,您需要更改一些CSS,即:

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

.columns {
    overflow-x: auto;
}

这似乎是因为.column背景受到原始代码中水平滚动条控制的100%宽度的限制.main.通过使.main纯粹的隐藏,然后设置overflow-x: auto上.columns,滚动现在由控制.columnsDIV,并允许其background待观察.

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

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

这样可以p在直接孩子的最后一个元素上设置一个右边距.columns,然后给出我认为你想要的外观.

这是修改过的小提琴(仅在Firefox中测试过).