3

この質問にはおそらく簡単な解決策があります。

2 つの列が並んだ Web サイトを設計しました。右の列を除いて、すべてが固定されています (メニュー バーと左の列)。

これは意図的なもので、右側の列だけをスクロールして、ページの読み取り可能なコンテンツを保持します。だから、すべてが素晴らしいですよね？

正確ではありませんが、左の列は左にフロートされ、右の列も十分に大きな左マージンでフロートされ、ロード時にページに適切に収まるようにします。

ただし、画面が水平方向に小さすぎる場合、ユーザーは2番目の列を移動して左右にスクロールでき、固定された最初の列の下でもスクロールできます。それは私が防ぎたいものです。

2 番目の列を垂直方向にスクロールし、水平方向には移動しないようにするにはどうすればよいですか?

css のスニペットは次のとおりです。

#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
#button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;}
#button{
    float:right; margin: 5px -20px 0 0;
}
#button a {
    background:url(../images/button.png) 
    no-repeat;
    display:block; /* Necessary, since A is not a block element */
    width: 167px;
    height: 58px; 
}
#button a:hover {
    background:url(../images/buttonhover.png) no-repeat;
    width:167px;
    height:58px;
}
.right {float:right; margin: 0 0 5px 25px;}
#secondary-content {float: right; margin: 100px 0 15px 569px; background: rgba(128,127,128,0.9); padding: 20px; background: rgba(128,127,128,0.9); width:405px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}

ありがとうございました！

4

2 に答える 2

13 
overflow-x:hidden

要素のスクロールバーを許可せず、ぶら下がっているものを非表示にします。

于 2012-11-13T20:41:26.850 に答える
0

あなたの質問を正しく理解できたと思いますが、フロートを使用する必要がないのはなぜですか。

フロートは要素を左また​​は右にプッシュすることであり、非常に便利だと思いますが、ソリューションには必要ありません。代わりに、セカンダリ コンテンツの div position: absolute で使用できます。マージンを使用する代わりに、上、左を使用する方が簡単です。したがって、二次コンテンツの div を適切な場所に配置したい場合は、次を使用できます。

position: absolute;
top: 100px;
left: 569px;

他の要素についても同じことを行い、余白を使用して要素の周囲にスペースを作成することをお勧めします。

于 2012-11-13T21:01:39.913 に答える