gpt4 book ai didi

css - 水平滚动的多列问题

转载 作者:技术小花猫 更新时间:2023-10-29 10:57:40 26 4
gpt4 key购买 nike

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

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

最佳答案

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

根据您的评论,这里是 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: 1pxmargin-top: -1px 如果它落下,它不应该生成一个新的列就在一列文本的末尾。

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

要让背景进行传输,需要修改一些CSS,即:

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

.columns {
overflow-x: auto;
}

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

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

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

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

这是 the fiddle modified (仅在 Firefox 中测试)。

关于css - 水平滚动的多列问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10821652/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com