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>