2013-03-04 70 views
2

這讓我瘋狂。我正在Wordpress中構建一個新的水平滾動網站。頁眉和頁腳是簡單的固定元素,但頁面內容水平滾動。我不是想在一篇文章中做到這一點,而是作爲一個頁面。一切工作正常,直到我達到一定的寬度,然後創建我的圖像的新行,搞亂了整個頁面的流程。它也隱藏了頁腳。我已經在多個瀏覽器中看到了這一點,並且陷入瞭如何做。只要我想要,我不應該能夠水平滾動嗎?這似乎是我在我的網站上達到某種最大寬度。Wordpress中的水平滾動點擊最大寬度

這裏它看起來good,然後如果我使用divs以相同的方式添加兩個圖像,它將跳過一條線並將所有東西都擰緊,看起來像是bad

請幫忙。這裏是relavent CSS:

/************************* GLOBAL STYLES ***************************/ 
body {color:#eee; background: #000000} 
.container-inner {position:relative; overflow:auto} 
.container {background:#111; position:relative; overflow:auto} 
h1,h2,h3,h4,h5,h6 {color:#eee;} 
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#eee;} 
h3.sub,h2.sub {margin: 0 0 10px 0;padding: 0 0 5px 0;font-size: 1.9em;font-weight: bold;line-height: 1em;text-transform: uppercase;letter-spacing: 2px;color: #515151;border-bottom: 1px solid #000;} 
a {color:#428ce7;text-decoration:none;} 
a:hover, a:focus {color:#fff;} 
p {color:#eee;} 
h6.top {color:#ccc;} 
.login {float:left;} 

/* Posts */ 
.content {font-size: 1.2em; position:relative; overflow:auto} 
.content h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;} 
.post {display:block;font-size: 1.2em;} 
.post h4, .post h6 {font-size: 1.2em;} 
.post h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;} 
.postmetadata {background:#000;padding:1em;color:#999; font-size:10px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;} 
.postmetadata a {} 
.postmetadata a:hover {color:#fff;} 
.underlined {border-bottom:1px solid #eee;} 
h6.underlined {margin:0 0 1em;} 
.welcomebox {padding:1.5em;margin-bottom:1.5em;color:#eee;text-shadow: 1px 1px 1px #000} 

.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;} 
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;} 
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;} 
.nav {background:#eee;margin:0 0 1em 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;} 
.nav:hover {background:#ccc;} 
.prev a, .next a {color:#222;text-decoration:none;padding:.2em 1em;} 

.nav-interior {margin:0;padding:0;clear:both;display:inline;} 
.nav-interior .next {color:#000;text-decoration:none;float:right;} 
.nav-interior .prev {color:#000;text-decoration:none;float:left;} 

/* Paragraph */ 
#paragraph {margin:0px 30px 0px 30px; text-align:justify;} 

/* Horizontal Scroll */ 
#wrapper { 
    float:left; 
    margin:40px 20px 30px; 
    margin-right:-999em; 
    position:relative; 
    overflow:auto; 
} 

.floatbox { 
    float:left; 
    margin:0 20px 0 0; 
    white-space:nowrap; 
} 

.floatbox img {float:left;} 

.floatboxtext { 
    width:480px; 
    float:left; 
    margin:20px 60px 0 40px; 
    font-family:"Courier New", Courier, monospace; 
    text-align:justify; 
    font-size:.8em; 
    overflow:hidden; 
} 

/* Footer */ 
#footer {padding:1.5em 0; margin:0 auto; color:#999; text-align:center; border-top:2px solid #333; position:fixed; width:100%} 
#footer p {color:#999} 
#footer h3 {margin:0;padding:0 0 .4em 0; border-bottom:none; color:#999} 

回答

1

沒有想法是如何工作的,但它確實對我來說,至少:

#wrapper { 
    margin-right:-999em; 
} 

要:

#wrapper { 
    margin-right: -99999em; 
} 

你的榜樣盯着-1080em工作,所以我認爲margin-right確定它是最大寬度。我把它作爲-99999em,因爲它看起來足夠大,你可以增加它。

+0

我不知道如何工作,但它確實。非常感謝,我的好先生。有點瘋了。我會給你買一瓶啤酒。 – 2013-03-05 05:52:28