問題タブ [two-column-layout]

最近、サイトのレイアウトに取り組んでいて、CSS に行き詰まっています。2 列のフッター レイアウトの簡単なチュートリアルに従うことができると思いたいのですが、列の 1 つのコンテンツに行き詰まります。

2 列のデザインは、左側が流動的な Google マップで、右側が固定幅のサイドバーです。この種のレイアウトの多くの例をたどってみましたが、常に Google マップの流動的な側面を維持するという問題に直面します。主に、Google マップは流動的なままでいるのが好きではありません。私は負のマージン、フロート、abosulte ポジショニング (GMaps はこれを本当に嫌う) で見つけることができるすべての CSS ソリューションを試し、テーブル (身震い) も試しました。

この問題を処理するアイデアはありますか?

次のレイアウトのCSS定義が必要です。

• middle-wrapper100％幅である必要があります
• column2-wrapper幅250pxである必要があります
• column1-wrapper利用可能なすべてのスペースを取る必要があります

要約すると、column1-wrapper幅は100％〜250ピクセルである必要があり、両方の列が列のように見える必要があります。

float: left両方の列に追加してみました。ただし、これはcolumn1-wrapper幅が狭くなることを意味します。左側の列に十分なコンテンツが含まれていないページでは、右側の列が左側の列に揃えられ、ページの中央のどこかになります。

float: leftLEFT列とfloat: rightRIGHT列に追加してみました。これにより、右の列が右の端に揃えられますが、左の列は適切に伸びません。

HTMLとCSSの本を読んでいます。2列レイアウトのサンプルコードがあります。

著者は、オーバーフロー自動と1％の高さを使用すると、メイン領域が拡張されて、計算されたコンテンツの高さが含まれるようになると述べています。1％の高さを削除して、さまざまなブラウザで試しましたが、違いは見られません。私はその使用法についてかなり混乱しています。何か案が？

私のHTMLが次のように言っている場合

それらの要素を 2 列のテーブルにあるかのように並べることは可能ですか? つまり、7 つの要素の場合、4 つの行があり、最後の行には 1 つの要素しかありません。

(要素自体には、右、左などの特別なクラスや ID はありません。)

左側に 1 つ、右側に 1 つの 2 つの列を表示するレイアウトを作成する方法を理解しようとしています。左の列の幅を指定するのはクールですが、余白とパディングがあるため、右の列の幅を指定してブラウザーに決定を委ねたくはありません。

これを行う例は見つかりません。人々は常にすべての列に固定幅を与えているようです。問題を再現するサンプル コードを次に示します。

特に長い段落を削除すると、右側の列が同じ行に収まるほど小さくなり、機能することに注意してください。

右側の列に残りのスペースを占有させる方法はありますか?

私は単純な 2 列のレイアウトを持っています (左の列は固定幅 200px、右の列は 100% 拡張します)。

右の列の最初の要素がPすべての要素であれば問題ありません。

ただし、右列の最初の要素がINPUT要素 ( width:100%) の場合は、下に移動します。

表示される結果は以下のとおりです (Chrome、FF、IE でテスト済み):

INPUT フィールドが次の行に移動するのに、P 要素が移動しない理由を説明していただけますか? そして、これを修正する方法は？

コードは次のとおりです。

2 列のコンテナーが必要です。詳細：

コンテナ

• 幅は親要素の 100% に調整する必要があります (簡単に実現できます)。
• 高さは両方の列を含むように調整する必要があります (つまり、その高さは 2 つの列の大きい方の高さと正確に等しくなければならないため、オーバーフローが発生せず、スクロールバーが表示されません)
• 左の列の幅の 2 倍に等しい最小サイズが必要です。

コラム全般

• コンテンツの高さに合わせて高さを可変にする必要があります。
• 上端が一直線になるように並べて配置する必要があります。
• ボーダー、パディング、またはマージンが 1 ピクセルでもどちらかに適用されている場合でも、レイアウトを壊したり、相互にラップしたりしないでください。非常に不安定で不幸なことになるからです。

具体的には左の列

• 固定の絶対幅をピクセル単位で指定する必要があります。

特に右の列

• 幅は、コンテナー内の残りのスペースを埋める必要があります。言い換えると...
• 幅は、コンテナーの幅から左の列の幅を引いた値に等しくなければなりません。つまり、この列内に DIV ブロック要素を配置し、幅を 100% に設定し、高さを 10px のように指定し、背景色を指定します。左の列の右端からコンテナーの右端まで、高さ 10px の色付きのストリップが表示されます (つまり、右の列の幅を埋めます)。

必要な安定性

コンテナーは、(ブラウザー ウィンドウのサイズを変更することによって) 最小幅 (以前に指定された) まで、またはレイアウトを壊すことなく、より大きな幅までサイズ変更できる必要があります。「壊れる」には、左の列のサイズがまったく変更されないこと (ピクセル幅が固定されていることを思い出してください)、右の列が左の列の下に折り返されること、スクロールバーが表示されること、右の列のブロック要素が列の幅全体を占めることができないことが含まれます。 、および一般に、前述の仕様のいずれも当てはまりません。

バックグラウンド

フローティング要素が使用されている場合、右の列が左の列の下に折り返されたり、コンテナーが両方の列を含むことができなくなったりする可能性はありません (列の一部を切り取ったり、列の一部を境界からオーバーフローさせたりすることにより)。 ）、またはスクロールバーが表示されます（したがって、フロート要素の封じ込めをトリガーするために、overflow:hidden 以外のものを使用することを提案するのはうんざりです）。列に境界線を適用しても、レイアウトが崩れないようにする必要があります。列のコンテンツ、特に右側の列のコンテンツがレイアウトを崩してはなりません。

これには単純なテーブルベースの解決策があるようですが、あらゆる状況下で惨めに失敗します。たとえば、Safari では、コンテナーが小さくなりすぎると、指定した幅を維持するのではなく、固定幅の左側の列が縮小されます。また、CSS 幅が TD 要素に適用された場合、最小幅を参照し、その中に大きなものが配置された場合に拡張されるようです。table-layout:fixed; を使用してみました。役に立ちません。また、右側の列を表す TD 要素が残りの領域を埋めるために拡張されない、またはそのように見える場合も見てきました (たとえば、1 ピクセル幅の 3 番目の列が右側に押し出されます)。右側の列の周りに境界線を配置すると、インライン コンテンツと同じ幅しかないことが示されます。

私が見た1 つの潜在的な解決策は複雑すぎます。IE8、Firefox 4、および Safari 5 で動作する限り、IE6 についてはあまり気にしませんでした。

http://denartcc.org/images/help.jpg

添付の写真の矢印からわかるように、4 つの div (誰がオンラインか、今後のイベント、統計、天気) を上にスライドさせて空白を埋めようとしています。右側の列の高さは可変で、展開すると、前述の 4 つの div がページの下に移動し続けます。彼らは白い箱の下にとどまる必要があります。

絶対配置の問題は、4 つの div (誰がオンラインか、今後のイベントなど) の高さも可変であるため、それらの 2 行目を絶対位置に貼り付けたくありません。

HTML

CSS

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

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

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

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

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

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

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

編集：

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

私が欲しいのは、固定サイドバー（右側）、たとえば幅300pxの2列のCSSレイアウトと、画面のサイズと高さに合わせて拡張し、垂直方向を提供する流動的な左側の列です。コンテンツで必要な場合は、左側の列のスクロールバー。

誰かが助けてくれるなら、私は永遠に感謝するでしょう。

これが私がこれまでに持っているものです...