1

つまり、基本的に、水平方向に積み重ねられた3つのインラインブロックdivがあります。

div1--div2--div3

div1とdiv3は超高層ビルの広告であり、div2は私のメインのコンテンツラッパーです。私が最初に抱えていた問題は、ウィンドウのサイズを変更してdivの幅を合わせた幅よりも小さくするたびに、div2とdiv3が同じ行に収まらないため、div1の下の次の行に折り返されることでした（表示時も同じ問題）スマートフォンやタブレットからのウェブサイトは幅が狭いため）、div1（広告）はメインページの中央にぎこちなく配置されます。white-space: nowrapdivが折り返されないようにbodyタグに追加し、追加することで修正しましたwhite-space: normalcontent-wrapper divは、コンテンツテキストが正常に折り返されるように、body要素から継承されないようにします。これで問題が修正され、Webサイトにアクセスすると、ブラウザーの幅に関係なく3つのdivが常に同じ行に表示され、必要に応じて水平スクロールバーが表示されます。

ただし、スクロールバーは常に左側から始まるため、中央に配置する必要があるメインコンテンツであるコンテンツラッパー（div2）はそうではありません。代わりに、div1（ad）が最初に左側に表示され、次にcontent-wrapperが表示されます。この状況を修正するにはどうすればよいですか？本体のワードラップを削除した場合、divが希望どおりに中央に配置されることはわかっていますが、そうしないと、divが折り返されるという最初の問題が発生します。とにかくCSSを使用して両方の問題を修正できますか？

4

1 に答える 1

1

メイン コンテンツ領域の右側に列をオフセットする必要がある場合に、似たようなことをしたことがあります。列を右側に配置するのは簡単でしたが、本当のトリックは、ページのオーバーフロー/スクロールに影響を与えないようにすることでした.

解決策は、メイン コンテンツと列をラップするコンテナーに次の 2 つのプロパティを追加することでした。

#wrap { 
    min-width: 960px; 
    overflow-x: hidden; 
}

両側に 2 つの超高層ビルがある 3 列のレイアウトでどのように使用できるかを示すために、これを適応させました: DEMO

于 2012-08-11T04:23:31.340 に答える