2012-03-01 18 views
0

このデザインに問題があります。ここでは例: http://zxc.pp.ua/test/05.htm OR http://jsfiddle.net/SkeLLLa/qQRpx/CSS。固定列のサイドカラムで3列レイアウト

ブラウザのウィンドウ幅未満1000px(ラッパーサイズ)である場合には、スクロールが表示され、私は右にドラッグすると、中央の列は、左の列の下になります。

センター要素に「最小余白」を設定するにはどうすればよいですか?または、そのようなレイアウトを実装する別の方法が分かっている場合は、教えてください。

+0

だから、あなたがこの場合の代わりの列が重複して発生するものをしたいですか? –

+0

このチュートリアルのようなもの:http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/ またはcss3セレクタ@mediaスクリーンと(最大幅:1000px){} – m03geek

答えて

0

他の列の位置は固定されているため、画面外に読み込まれた場合や移動しない場合はスクロールする必要があります。固定位置を解除するか、ラッパーのサイズを小さくします。

0

まずはread this私はしばらくCSSをやっており、いつも参考にしなければなりません。最小幅はTry thisです。あなたがまだ問題を抱えている場合は、私があなたに何をしているのか分かりません。

+0

実際には、最初のリンクを読んでから始めてみてください...あなたは3つの列がすべてあなたの「中心」列に含まれています。これは私がゼロから始めやすいです。 firebugをダウンロードするか、Chromeのデベロッパーツールを使用してください。彼らは人生の節約になります。 –

+0

私は最初のリンクを読んだことがあります。中央欄のすべてをネスティングするとこの問題は解決されません。最小幅もこれには影響しません。 – m03geek

0

いくつかのオプションがあります。

同じ効果を達成するには、必要な列の色を使用して背景イメージを作成し、このイメージでラッパーの背景を設定して、3つの列にアピュランスを適用します。

ラッパーで3つの列を設定することもできます。ラッパーをオーバーフローに設定:隠します。浮動小数点の各列には、2000pxの下余白と2000pxの負の余白を付けます。余分なスクロールを作成せずに、列をラッパーdivの下に伸ばします。

ます。また、CSS 3列聖杯をチェックアウトすることができます:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

+0

私たちは恋に落ちているかもしれません...私は左の下の中央の欄を「隠す」という横スクロールについて言いました。私は左右の列を伸ばす必要はありません... 聖杯のチュートリアルは良いですが、この場合はありません。私は2つの固定された列を持っているので、中央の列は "無限"(goolge +ニュースフィードなど)であるため、常にユーザーに見えるようにする必要があります。 – m03geek