gpt4 book ai didi

css - Wordpress 水平滚动 - CSS 可能吗?

转载 作者:行者123 更新时间:2023-11-28 03:00:40 25 4
gpt4 key购买 nike

是否可以修改主题的 CSS 以允许在 Wordpress 中水平滚动?

我在想,content container 是什么东西需要设置成极宽的?内容容器仍需要包含在我的主题的包装器宽度内。

这是我的主题的 CSS 代码:

#wrapper{width: 90%; max-width: 980px; margin: auto;}

#header-container{max-width: 95.918367%; padding: 2.127660%; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;}

#content-container{padding: 0px; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;}

#left-column{float: left; width: 63.265306%; padding: 20px 2.040816%;}
#right-column{float: right; width: 28.265306%; padding: 20px 2.040816%; border-left: 3px solid #f0f0f0;}

.portfolio #left-column{float: left; width: 69.387755%;}
.portfolio #right-column{float: right; width: 22.142857%; border-left: 3px solid #f0f0f0;}

#full-width{padding: 20px 2.127660%; margin: auto;}

#footer-container{margin: 0px auto; padding: 0px; background: #293037; overflow: hidden;}

.post-image img{width: 100%; height: auto;}

如果这不可能,是否有任何其他建议你们可能需要在 Wordpress 中创建它?我正在尝试制作一个以类似于此网站的方式滚动的网站:http://www.gouldevans.com/portfolio/ku-debruce-center我不希望滚动占据整个页面,我仍然希望滚动信息包含在某种框架内。

如有任何信息,我们将不胜感激!

最佳答案

要回答您的问题... 是的,您可以在 Wordpress 中执行此操作。或者您可以编辑 CSS 的任何其他基于 HTML/CSS 的应用程序。

这个概念相当简单:

  1. 您有一个包装容器,其 overflow-x 属性设置为 scroll 并且 width100%视口(viewport)。
  2. 您有一个内部容器,其内容的宽度大于视口(viewport)。

在这种情况下,包装器上的水平滚动条将被激活。您可以相当轻松地将相同的概念应用于您的 Wordpress 结构和 CSS。 我在下面提供了一个简化的示例

注意事项:

  • overflow-x 是一个 CSS3 属性,所以如果您的目标浏览器是不支持 CSS3,您需要采用其他方法。
  • 我建议不要直接修改 Wordpress 主题,而是创建一个子主题并用它覆盖 styles.css 文件。否则,您将来在升级主题时会遇到麻烦。这是一个相当简单的过程,通过快速谷歌搜索很容易找到。

祝你好运!

.wrapper {
width: 100%;
overflow-x: scroll;
padding: 0;
margin: 0;
}
.container {
width: 2000px;

}

img {
float: left;
}
<div class="wrapper">
<div class="container">
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
<img src="http://fillmurray.com/200/200" />
</div>
</div>

关于css - Wordpress 水平滚动 - CSS 可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46226371/

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