問題タブ [fluid-layout]

私はhtml入力を持っています。

入力にpadding: 5px 10px;は、親 div の幅 (流動的) の 100% が必要です。

ただし、を使用するwidth: 100%;と、入力が次のようになり100% + 20pxます。これを回避するにはどうすればよいですか?

例

親div内に2つのdivが（並んで）あります。右側のdivが残りのスペースの100％（つまり、100％-200px）を占めるようにし、常に左側のdivの隣（左側のdivの下ではない）にとどまる必要があります。

すでに質問されている類似のシナリオをいくつか見つけましたが、この特定の問題を解決するシナリオはありません。誰かが助けてくれることを願っています！

3 つの div が連続しています。中央の div は中央に配置され、幅と高さが設定されています。外側の 2 つの div を拡張して、ウィンドウの端と中央の div の端の間の残りのスペースを埋める必要があります。このような：

http://kthornbloom.com/example.jpg

*注-CSSで解決したいのですが、javascriptが必要な場合は大丈夫です

*注 2 - これの目的は、中央の div を中央に配置することではありません。それを行うためのより良い方法があることはわかっています。目的は、中央を除いてページの全幅である必要がある背景要素を使用するサイトのデザインです。

通常、コンテナdiv内にフローティング要素がある場合、次のようになります。

<div style="clear:both;"></div>流動的なレイアウトのすべてにそれを配置することは、非常に面倒で醜いことだと思います。だから私はこのようなことをしようとしました（cssを使用していますが、簡単にするために）：

そして、動作しませんでした。.containerクラスに何かを追加することでそれを機能させることは可能ですか？

2列のレイアウトがあり、右の列の幅は350ピクセルで、左の列の幅はページの残りの部分を占めるようにする必要があります。または、少なくともそれは私がやりたいことですが、残念ながらそうではありません。

これが私のcss/htmlの外観です：http：//jsfiddle.net/CmJ7P/。これを実現する方法についてあなたが提供できるどんな助けも大いにありがたいです。

編集：可能であれば、IE6のソリューションをお勧めします

DIV を使用して 2 列のレイアウトを作成したいと考えています。右の列は 200px の固定幅で、左の列は残りのすべてのスペースを取ります。

テーブルを使用する場合は、非常に簡単です。

しかし、DIV はどうでしょうか。これを達成することは可能ですか？はいの場合、どのように？

私は周りを見回しましたが、私が探しているものがまだかなり見つかりませんでした。そのため、この質問が他の場所でまだ回答されていないことを願っています。

とにかく、問題のレイアウトはここにあります。私が達成しようとしているのは、固定幅の左の列と流体幅のコンテンツ領域です。ほとんどの場合、問題なく動作します。ただし、コンテンツがブラウザウィンドウの高さまたは幅を超えて拡張されると、セクションが希望どおりに拡張されないように見えます。上部の灰色のバーがページコンテンツの右側に到達せず、左側の列の高さもページコンテンツの下部に到達しないことに注意してください。

これは、CSSを介して高さを100％または幅を100％に設定することが静的であるという事実に起因すると私は考えていますか？つまり、CSSが呼び出されたときのブラウザウィンドウの高さ/幅が何であれ、保存されます。

その場合は、要素の高さと幅を設定する他の方法を調べる必要があるかもしれません。何か案は？また、ページ内のダミーコンテンツは今のところ画像であることに注意してください。データを非公開にするために、名前などをぼかしたいと思いました。

あなたの助けのすべてに感謝します!!!

レスポンシブ Web デザインで画像を拡大または縮小するための推奨される方法は何ですか?

画面サイズごとに異なる画像を使用する方が良いですか、それとも同じ画像を拡大または縮小する必要がありますか?

ウェブサイトのパフォーマンスを考慮すると、どのオプションが最適ですか?

最新および古いすべてのモバイルブラウザーで動作するには、クロスブラウザーの方法が必要です。

DIV固定幅を使用せずに流動レイアウトの「ツールバー」を生成し、そのA中に多くを生成するサーバー側コンポーネントがあります。

次に、そのレイアウトをカスタマイズして、すべてのAタグが親の幅に自動的に収まるようにする必要があります。ただし、子の数は可変であり、親の幅は不明です (ウィンドウに自動的に収まります)。

このフィドルでいくつかのテストを行いました: http://jsfiddle.net/ErickPetru/6nSEj/1/

しかし、動的にする方法が見つかりません（最後のAタグのコメントを外して、どのように機能しないかを確認してください、笑）。

サーバー側のソースを変更して、固定幅の HTML を生成することができません。そしてどうしても方法があれば CSS だけで解決したいです。

子の数に関係なく、すべての子を親の幅に自動調整するにはどうすればよいですか?

別の私の質問 (これ: How to make children auto fit the parent's width only with CSS? ) への回答に基づいて、パフォーマンスに関する問題を解決するための最良の jQuery アプローチはどれかを考えています。

ブロック 1: 必要に応じてすべての DOM 要素を検索します。

ブロック 2: DOM の子のみを検索し、each()、parent()、および siblings() を使用します。

ブロック 3: 最初に DOM の親を見つけ、each() を使用して、コンテキストに基づいて子を見つけます。

誰かがテストしたい場合のフィドルは次のとおりです。http://jsfiddle.net/ErickPetru/6nSEj/3/

では、どのブロックが良いでしょうか？なぜ？