問題タブ [fluid-layout]

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

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

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

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

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

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

サイトのページにかなり大きな画像を表示しようとしています。ユーザーの解像度に応じて動的にサイズを変更して、すべてのモニターで同じ割合の画面を占めるようにしたい。どうすればいいですか？

コンテンツが TextBlock (単なる文字列ではない) であるカスタム ToggleButton を作成し、XAML の適切な場所に手動で貼り付けました。ToggleButton の親レイアウトは 2 列の Grid であり、トグルによって ContentPresenter と一部のグラフィックが列の間で交換されます。

FluidMoveBehavior ボタンをオンにすると (私は Expression Blend を使用しています)、グラフィックは完全にアニメーション化されますが、ContentPresenter 内の TextBlock はアニメーションなしでジャンプします。

なぜこれが起こるのかわかりません。私が知らない既知の制限はありますか?

編集：不規則な動作のXAMLの例を追加

注：質問以来、私は少し違ったやり方をしていますが、なぜこれが起こっているのか知りたいので、問題のあるボタンを分離しました。

http://www.twofivefivefive.com/asctest/

私はこのサイトで友人を助けています。これは流動的な % ベースのデザインです (私はこれを扱った経験がありません)。

何らかの理由で、右側の空白スペースにスクロールする水平スクロールバーを取得しています。ページの幅が本来よりも広くなった原因が何なのか、まったくわかりません。コードを 3 回チェックしたところ、すべて問題ないようです。私は必死になっています！

どんな助けでも大歓迎です。

<li>要素で構築された流体グリッドがあります。

例えば：

これは次のようになります。

万歳！

<li>問題は、高さを伸ばす要素の 1 つにコンテンツを追加するときです。私はこのようなもので終わりたいです:

しかし、実際には次のような結果になります。

ブー！

<li>基本的に、右の利用可能なスペースにプッシュするのではなく、上記の要素から s の 1 つが押し下げられたときに、「行」を揃えようとしています。

ほとんどのスクリーン リーダーは画面からスクロールされるコンテンツを読み取ることができないため、固定幅の Web サイトにアクセスできないとのことでした。これに真実はありますか？これは私には正しく聞こえないので、このトピックについて説明を求めたいと思いました。どんな情報でも大歓迎です、ありがとう！

これには簡単な修正があるかもしれませんが、それは私を長年悩ませてきました...

状況を説明しましょう。ページ内のすべてのコンテンツ (ヘッダーとフッターも含む) を保持する ID 'container' を持つ div があり、すべてをインラインで保持し、単純な 'margin:0 auto;' を 1 つだけ実行できます。倍数の代わりに。#container の幅を 80% に設定したとしましょう。ここで、同じ幅 (80%) の別の div を内部に配置し、10 ピクセルのパディングで「ヘッダー」の ID を与えると、ページがパディング量を追加するため、レイアウトは (いわば) 「壊れる」でしょう。幅。では、#header div のパーセンテージを下げるなどの方法を使用せずに、範囲内にとどめるにはどうすればよいでしょうか? 基本的に、私はそれを流動的にしたいと思っています。

ここに、私が話していることのアイデアを提供するためのコード例をいくつか示します...

CSS

HTML

私を永遠に悩ませてきたこの問題を誰か助けてくれませんか?

列として機能する可変数の div があり、可変数の div に静的な幅 (ピクセル単位) を設定し、可変数の div をウィンドウの残りの幅に拡張したいと考えています。流動的な列の幅を 100% に組み合わせると、一部の列が行から押し出されます。流動的な列のウィンドウ幅の割合を決定するために、javascript を使用して静的な列の幅を差し引く必要がありますか?使用できる css 属性はありますか?

変数とは、流動列または静的列の数が事前にわからないことを意味するため、ビルド済みの 2 列または 3 列のテンプレートを使用できません。

これが私が意味することの例です：

ですから、これを説明するのは少し難しいでしょうが、誰かが私が話していることを認識してくれることを願って試してみます.

だから私StackPanelは 3Buttonsと 3があり、各リストの「開いている」状態を表すLists3 もあります (アコーディオンです)。VisualStatesデフォルトでは、各要素の高さは 0 に設定されており、それぞれの状態では高さが auto に設定されています。可変レイアウトがオンになっているので、0 から自動に変更できます...

tl;dr = FluidLayout でアコーディオンを作成しました。

私のアコーディオン ペインの 1 つでItemsControl、生成されたアイテム テンプレートを作成しました。その中には、ボタンをクリックすると、より多くのコンテンツが表示される「エキスパンダー」コントロールがあります。これも実行されVisualStates、FluidLayout がオンになります。ただし、拡張コントロールを拡張しようとすると、高さ 0 -> 自動高さからスムーズに移動せず、代わりに表示されます。

誰もが同様の問題に遭遇しますか？

使用したいレイアウトのアイデアはありますが、正しく動作させることができません。私は何時間も検索してきたので、ここにいる誰かが助けてくれることを願っています。

レイアウトはそうです。

1つのラッパーdivには、6つの子divが格納されます。これらの子divは、ラッパーdivのサイズに関係なく、常に中央に配置する必要があります。

問題は、ブラウザのサイズが小さくなり、ボックスが左下の線にノックされた場合ですが、常に中央に配置する必要があります。これは純粋なCSSを使用して可能ですか、それともjqueryを使用する必要がありますか？