5

タイトルはそれを言います。次のような2列のCSSレイアウトが必要です。

  • 中央揃え-メインコンテンツはページの中央揃え
  • 固定（ピクセル）右列幅
  • 左の列が流動的です-使用可能なすべてのスペースから右の列の幅を差し引いたものを使い果たします
  • ソース順-左側の列のコンテンツは、HTMLソースの右側の列のコンテンツの前にあります
  • 最小幅を考慮します-私の例では760px
  • 最大幅を考慮します-私の例では1024px

ウィンドウが最大幅よりも大きい場合、コンテンツはページの最大値の中央に配置されます。ウィンドウが最大幅よりも小さい場合、水平スクロールバーが表示される最小幅よりも小さい場合を除いて、コンテンツはページの100％を占めます。

これらのプロパティをサポートしていないブラウザーの最小/最大幅を処理するためにいくつかのマイナーなJavaScriptを使用するつもりですが（私はあなたのIE6を見ています）、レイアウトのその部分を劣化させるのと同じように喜んでいます。

それはテーブルでシンプルなドロップデッドです。私は文字通り何百ものサンプルレイアウトを調べましたが、近いものがいくつかありますが、私が求めているすべてのことを実行できるものはありません。問題は、同じスタイルで流動的な左列とソースの順序を取得することであるようです。私は、適切なソース順序を持つ固定左/流体右（私が望むものの反対）、またはソース順序なしの流体左/固定右のいくつかの例を見つけましたが、両方ではありません。

フロートを使用するか負のマージンを使用するかは関係ありませんが、絶対的なポジショニングは避けたいと思います。

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+
4

3 に答える 3

3

DynamicDriveのCSSテンプレートを確認することを強くお勧めします。5番目のダウンはあなたが探しているものでなければなりません（Fluid-Fixed）。max-widthメインコンテナ要素にとを追加するだけmin-widthで、すべて設定されます。

参考までに、これらはページレイアウトのベースとして使用するのに非常に優れたテンプレートです。CSSで遊ぶことは、フロートとポジショニングについて多くを学ぶための素晴らしい方法であり、Web開発の初期の頃に私を本当に助けてくれました。

于 2010-07-16T01:21:07.347 に答える
1

私の試み： http ：//www.ryankinal.com/fluid/

完全には機能しませんが、ウィンドウサイズが非常に小さい場合、マージンがマイナスになるとコンテンツがページから外れる可能性があるためです。理論は次のとおりです。

  1. ある割合のコンテナ
  2. 左の列はコンテナの100％で、左に浮かんでいます
  3. 右の列は0％の幅でラップされ、フロート右のラッパー
  4. 固定幅の右列（私の例では200px）
  5. 左の列と右の列の左の余白は右の列の半分の幅（私の例では100px）

したがって、右側の列が大きいほど、コンテンツが削除される可能性が高くなります。しかし、それは私が良い時間かそこらで得たのと同じくらい近いです。また、右側の列を無関係なdivでラップし、オーバーフローを利用しているため、少しハックです：表示されます。

しかし、彼らは私の公爵です（今のところ）。

于 2010-07-16T02:26:03.760 に答える
0

このようなものをお探しですか？（負のマージン+フロート+適切なソース順序+固定右）

http://blog.html.it/layoutgala/LayoutGala23.html

インデックスページのその他のレイアウト：http：//blog.html.it/layoutgala/

そして、最小/最大幅をコンテナに追加するだけです。

于 2010-07-16T01:22:54.333 に答える