水平滚动的多列问题 [英] Multi-column issue with horizontal scroll

问题描述

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

I have a parent div (main) with the horizontal overflow set to auto. I then have a child element (columns) that has all of my column properties on it. The problem is that once the content goes further than the viewport I can no longer control the right hand margins or padding as the column only seems to go as far as the viewport. For example when I put a background color on "columns" the background only goes as far as the edge of the viewport even though the content scrolls further than that.

.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/

推荐答案

新答案：使用伪元素帮助

根据您的意见，这里是新的小提琴/我相信满足你的欲望。它添加了一个额外的 div 包装 .columns 我标记为 .scroller ，以及以下css：

New Answer: Use Pseudo-Elements to Help

Based on your comments, here is new the fiddle that I believe meets your desires. It adds an extra div wrapping .columns I labeled .scroller, and the following 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

I use a pseudo-element in .main to give the background for .columns set to the explicit height you intend for those, then I also use another pseudo-element in the last p to force rendering the final 20px of the column. It should work no matter how long or what part it takes up, and at height: 1px and margin-top: -1px it should not generate a new column if it falls right at the end of a column of text.

要转移背景，您需要更改一些CSS，即：

To get the background to transfer, you need to change some CSS, namely:

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

.columns {
    overflow-x: auto;
}

$ b

这似乎是因为 .column 背景受限于 .main 上的 100％水平滚动条在你的原始代码。纯粹隐藏 .main ，然后在上设置 overflow-x：auto .columns ，滚动现在由 .columns div控制，并允许其背景

This seems to be because the .column background is being limited by the 100% width on the .main which is in control of the horizontal scroll bar in your original code. By making .main purely hidden, then setting overflow-x: auto on .columns, the scroll is now controlled by the .columns div, and allows its background to be seen.

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

To fix the absence of padding on the far right side, the only think I could come up with was to add the following:

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

这会在最后一个 / code> .columns 的直接子节点的元素。

This puts a right margin on the last p element of the immediate children of .columns which then gave the look I assume you are going for.

以下是修改的小故事（仅在Firefox中测试）。

Here's the fiddle modified (tested only in Firefox).

这篇关于水平滚动的多列问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！