WordPress的水平滚动 - 可能与CSS？

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中做到这一点。或者您可以编辑CSS的任何其他基于HTML/CSS的应用程序。

概念相当简单：

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

在这种情况下，包装器上的水平滚动条将被激活。您可以相当容易地将相同的概念应用于您的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>