2

これは私を夢中にさせています。Wordpressで新しい横スクロールWebサイトを構築しています。ヘッダーとフッターは単純な固定要素ですが、ページ コンテンツは横方向にスクロールします。私はこれを投稿内ではなく、ページとして実行しようとしています。特定の幅に達するまではすべて正常に機能し、画像の新しい行が作成され、ページ全体の流れが台無しになります。また、フッターを非表示にします。私はこれを複数のブラウザで見てきましたが、何をすべきかについて行き詰まっています。好きなだけ水平にスクロールできるようにすべきではありませんか? 私のウェブサイトである種の最大幅に達したようです。

ここでは見栄えがよく、次にdivを使用して同じ方法でさらに2つの画像を追加すると、行がスキップされ、すべてが台無しになり、見栄えが悪くなります。

助けてください。関連する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}
4

1 に答える 1

1

これがどのように機能するかはわかりませんが、少なくとも私にとっては機能します：

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

に：

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

あなたの例は の周りを見つめてい-1080emたので、margin-right最大幅を決定すると思います。それ-99999emは十分に大きいように思えたので、それを増やすことができます。

于 2013-03-04T22:06:53.847 に答える