2 つの div があるとします。1 つは最小幅の可変幅で、もう 1 つは右に浮いている div です。たとえば、jsbin.com のこのライブ デモ (コード付き) には次のようなものがあります。

ブラウザのサイズを変更して狭くすると、fluid div は最小幅に達するまでそれに応じて調整されます。その後、ウィンドウをさらに狭くすると、水平スクロールバーが表示され、右側のフローティング div がウィンドウの右側に隠れてオーバーフローし始めます。

私が望むのは、ユーザーがウィンドウを狭め続けた場合、非フローティング div が最小幅に達した後、ブラウザーはフローティング サイドバー div を非フローティング コンテンツの下に押し込み、オーバーフロー (非表示) するのではなく、権利。それは可能ですか？

2つの側面があるレイアウトを作成しています。左が 30%、右が 70% です。私はワイドスクリーンモニターを持っているので、すべての画像が希望どおりに表示され、十分なスペースが残っています。しかし、より低い解像度と最も一般的な 1024x768 では、私が作成した画像は左側には大きすぎて、境界線から右側に出てしまいます..どのようにすれば画像を自動的にサイズ変更して、より小さな解像度に収まるようにできますか?

CSS

3列のレイアウトを作成しようとしていますが、すべての列を幅33％、高さ50％の流動的なものにしたいです。また、列の3つのdivにパディングが必要です。しかし、パディングを追加するたびに、最後のdivが次の行に移動します。

どうすればこれを修正できますか？

html

css

パーセンテージ幅の html 要素には、その内部の静的コンテンツの最小幅が必要です

こんにちは、流動的/レスポンシブなレイアウトを作成しようとしています。パーセンテージ幅を持つ html 要素に、その内部コンテンツの最小幅を強制する方法はありますか? つまり、内部コンテンツに 200px のような静的な幅がある場合はどうなりますか?

例を次に示します: http://www.nathanielkessler.com/div/csshelp.html

IE9 で Quirks モードに設定し、ウィンドウのサイズを変更すると、希望どおりに動作します。(画面のサイズを内側に変更すると、右側の 2 番目の div が左側の最初の div の下に表示されることに注意してください)。

ドキュメントを IE9 標準モードに戻し、サイズを内側に変更すると、外側の赤い枠で囲まれた div が内側のコンテンツ (黄色のボックス) を尊重していないことがわかります。私はその境界を超えて縮小し続けています。
quirks モードのように動作させる方法はありますか? (JavaScript なし)

次の構成では、3つの要素が流体コンテナ内にあります。

要素AとBの幅は50％です。要素Cの幅は100％です。ここで実際の例を見ることができます。

要素AとBの幅を計算するときに丸められるため、コンテナの幅が奇数のピクセルの場合、行の右端が整列しません。フレームのサイズを変更しているときに、端がずれて再整列するのを確認できます。一番上の行に2つ以上の要素、たとえば10が含まれていると、効果が悪化します。

代わりに、要素Cの幅を、パーセンテージ幅の合計ではなく、要素AとBの実際の幅の合計に等しくしたいと思います。これは、JavaScriptを使用したり、テーブルに頼ったりせずに可能ですか？

さて、私は別のdivの中にネストされたdivを持っていて、内側のdivは80％の幅で中央に配置されています。しかし、完全に中央に配置されていません。

どうすれば完全に中央に配置できますか？

http://jsfiddle.net/xx8hx/

http://postimage.org/image/15linq5yc/

html

css

Webサイトの応答性を高めるために、要素を流動的に定義する方法を学ぼうとしています。今日、ようやく修正した状況に出くわしましたが、なぜ修正が機能したのかわかりません。

サイト（NDA）にリンクできませんが、問題の要素を含むサンプルページをいくつか掲載しました。

間違った例：http ：//cruxwire.com/wrong.html正しい例：http ：//cruxwire.com/right.html

私が持っているのは、3つのdivが左に浮かんでいることです。それらに（パーセンテージとして）パディングを追加しようとしており、target / context = resultを使用してから、* 100（パーセンテージであるため）を使用しています。

EthanMarcotteによるレスポンシブWebデザインの私のコピーは、「要素に柔軟なパディングを設定する場合、コンテキストは要素自体の幅です」と述べています。 私はdivに20％の幅を与えました。親要素が945pxであるため、各divのピクセル幅は189pxです。20pxのパディングを追加したかったので、20/189=0.1058201058201058。10.58201058201058％の各divにパディングを追加しました。

これにより、各divに20pxではなく100pxのパディングが与えられます。最終的に、パディングはdiv自体ではなく、親要素の幅に基づいて計算されていることに気付きました。

私の解決策は、既存の各divの周りに追加のdivを配置して、一方に幅を適用し、もう一方にパディングを適用できるようにすることでした。これで問題は解決しました。

パディングが、それ自体の要素ではなく、その親要素を基準にして計算されるのはなぜですか？

追加のdivを追加せずにこれを行うにはどうすればよいですか？

この投稿にリンクされているページでコードを確認できます。以下にもコードを追加しました。

間違い：

右：

Internet Explorer 8 の可変レイアウト (max-width:100% を使用する画像) に問題があります。可変幅の画像と余白、パディング、および境界線の周りにアンカー タグをラップしたいときに問題が発生します。参加してください。これはあなたが思っているよりも少し難しいです。

したがって、HTML はおおよそ次のようになります。

そしてスタイリング：

私が持っているのは、パディングと境界線のあるアンカーに囲まれた流動的な画像です。

イメージがコンテナよりも小さい場合を除き、上記で問題ありません。その場合、アンカーのパディングと境界線はイメージを超えて拡張されます (コンテナの全幅を埋めます)。

それでは、アンカーをそのコンテンツに合わせて強制する何かを試してみましょう。

OK、アンカー ボックスは画像よりも大きくなりませんが、Firefox、Opera、および IE8+ ではアンカー タグが柔軟ではなくなりました。ただし、IE7 ではレイアウトがトリガーされるため、処理されます。次は：

アンカーは再び柔軟になりましたが、画像の縮小が始まるとコンテナよりも 12 ピクセル大きくなります。アンカーは画像に基づいて幅を計算し、境界線とパディングを追加します。何らかの理由で、Chrome と Safari はこれを行いません。とにかく、救助のための代替ボックスモデル：

現在、Firefox、Chrome、Safari、Opera、IE7、IE9 では期待どおりに動作していますが、何らかの理由で IE8 では動作していません。そこでは、アンカーはまだコンテナの外側に伸びています。box-sizing: border-boxIE8でサポートされているはずなので、どうすればいいのか少し困惑しています。

問題を切り分ける JSFiddle ページがありますhttp://jsfiddle.net/3gkXU/22/

最後の手段として、JavaScript を使用してアンカーがその親要素よりも大きいかどうかを検出しdisplay: block、人々がブラウザーのサイズを変更する可能性が低いと仮定してアンカーに切り替えることができます。私はそれに反対しているわけではありませんが、ここに CSS ソリューションはありますか?

2011 年に、私は 2 列のレイアウトに困惑しました。私は恥ずかしいと思います。;)

課題は、これを考え出すことです。

左の列のマージンを右の div のマージンと等しくなるように設定する典型的な 2 列のレイアウトでは大したことではありません。ただし、この特定の例の変数は、右側の div が特定の時点でどのくらいの幅になるかがわからないことです (これは、変化するテキスト行に基づいています。

要約すると、次のものが必要です。

• 2列のレイアウト
• 両方の列が全幅を占める
• 右側の列は、含まれるテキストと同じ幅です
• 左側の列は残りのスペースと同じ幅です

以前にこれを構築する必要があったようですが、困惑しています。

私は CSS、JS、または jQuery ソリューションに対してオープンです。

編集：

実際、私はすでにかなり簡単な jQuery ソリューションを目にすることができます。右側の div のレンダリングされた幅を取得し、その幅を親コンテナーの幅から差し引いて、左側の列の幅を同じに設定する計算を行うことができます。きれいな CSS オプションがない場合、それが私の代替案になります。

2つの固定幅のサイドバー（左と右）と流動的な中心を持つ3列のレイアウトに取り組んでいます。私はAListApartのHolyGrailの記事に従いました。これはほとんどのブラウザーで正常に機能しますが、InternetExplorer7以降でいくつか問題が発生しています。

IE 7+の問題は、実際にはこの手法に起因するのではなく、ページがクァークモードでレンダリングされているという事実に起因しています。ただし、標準準拠モードでレンダリングすると、多くの古い要素が置き換えられ、完全に書き直す必要があります。

この記事の日付が数年であることを考えると、これはこの主題に関する最新の参考資料ですか？または、別の手法を適用する必要がありますか？

これを行うための最良の方法に関する洞察は大歓迎です。