9

我有一个水平溢出设置为自动的父 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/

4

2 回答 2

5

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

根据您的评论，这是我认为满足您需求的新小提琴。它添加了我标记的额外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来将背景.columns设置为您打算为它们设置的显式高度，然后我还在最后一个伪元素中使用另一个伪元素p来强制渲染列的最后 20px。无论占用多长时间或占用什么部分，它都应该起作用，并且如果它恰好位于文本列的末尾height: 1px，margin-top: -1px则不应生成新列。

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

要获得background传输，您需要更改一些 CSS，即：

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

.columns {
    overflow-x: auto;
}

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

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

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

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

这是修改后的小提琴（仅在 Firefox 中测试）。

于 2012-05-30T18:51:52.070 回答
0

只需将列 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;
}
于 2012-05-30T18:54:18.600 回答