Question

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

我认为内容容器需要设置为极宽的？内容容器仍然需要包含在我的主题的包装宽度中。

以下是我主题的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 我不希望滚动占据整个页面，我仍然希望滚动信息包含在某种框架中。

非常感谢任何信息！

Answer 1

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

这个概念非常简单：

您有一个包装容器，其overflow-x属性设置为scroll，width为100%视口。
您的内容容器的内容宽度大于视口。

使用此方案，将激活包装器上的水平滚动条。您可以非常轻松地将相同的概念应用于Wordpress结构和CSS。 我在下面提供了一个精简的示例。

警告：

overflow-x是一个CSS3属性，因此，如果您要定位浏览器不支持CSS3，你会想采取另一种方法。
我建议不要直接修改Wordpress主题，但要创建一个子主题并用它覆盖styles.css文件。否则，在升级主题时，您将来会遇到并发症。这是一个相当简单的过程，可以通过快速谷歌搜索轻松找到。

＆＃13;

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

＆＃13;

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

＆＃13;

Wordpress水平滚动 - 可能与CSS？

1 个答案: