問題タブ [liquid-layout]

CSS で均一なサイズとマージンを持つ要素のリキッド グリッドをどのように作成しますか?

私が抱えている主な問題はマージンです。明らかな解決策は、幅とマージンをパーセンテージに設定して、それで完了することだと思います。垂直マージンはコンテナーの幅のパーセンテージであるため、これは機能しません。コンテナーが水平方向にサイズ変更されると、垂直方向の間隔はオフになります。

私は2つの方法を試しました。1 つはパーセンテージ マージン、もう 1 つはマージン 'em'です。どちらも正しくスケーリングしません。私に何ができる？

私はすでにこの質問を読んでいますが、状況が少し異なり、CSS があまり得意ではないため、自分のニーズに合った解決策を頭で考えることができません。

私が持っているのは、他の 3 つの div を含む div です。

• 左のdiv1
• div2 中央揃え
• 右のdiv3

問題は、div2 が存在する場合と存在しない場合があることです。

これは私が現在持っているものです：

しかし、これは私が欲しいものです:

これが私のフィドルです

何か案は？ありがとう！

私はここ数年、Nail Doherty の coda スライダーを使用しており、px ではなくコンテナーに % 幅を使用するようにレスポンシブにする方法を誰かが知っているかどうか疑問に思っていました。スライダーを正しく動作/表示させるためにパネルの js の幅を計算するには、css で固定幅が必要であることを理解していますが、液体にするための修正があったかどうか疑問に思いました。

特定の画面解像度でサイズを変更するためにメディア画面クエリを使用できますが、可能であれば液体の回答を求めていました。

非常に単純な固定液体レイアウトを設定しています。ヘッダーは 100% に設定され、サイドバーは固定幅に設定され、左にフロートされます。コンテンツ領域の幅は定義されていません (残りのスペースを埋めるため)。

サイドバーとコンテンツ領域の間に約 3 ピクセルの空白が追加される IE を除くすべてのブラウザーで適切に機能します。

JSFiddle で問題を再現できないため (正確なコードをコピーして貼り付けても)、代わりに画像を添付しました。最初の画像は Chrome でレンダリングされ、2 番目の画像は IE9 でレンダリングされました。

CSS (スタイル.css)

HTML

stackoverflowは多くのクールなことを学ぶのに役立ちましたが、残念ながら私は何かに行き詰まっていて、それから抜け出す方法を研究する方法がわかりません。

私はうまく機能し、まさに私が望むものであるWebサイトをレイアウトしました。それは、LemmonSlider.jsと呼ばれる優れたプラグインを使用し、レイアウトで完全に流動的にすることができました...ほぼ！

問題は、Safari、iOS、Chromeで完全に機能することですが、Firefoxでテストすると、状況が悪くなり、非常に悪くなります。IEでテストしたことはありませんが、同じようにファンキーなものになると思います。

以下は、私が何をしたかを理解するための簡略化されたコードです...

本文にmin-height、htmlタグを使用してみましたが、役に立たないようです。

どんな入力でも大歓迎です

私は適応性のある複数列のレイアウトを構築しようとしています（流体、弾性、あなたがそれをcllしたいものは何でも）そしてアイデアを試すためのテストドキュメントを構築しました。

x個の列を1ページに正確に並べて表示できるようにするために、いくつかの計算を行いました。2は簡単（50％）で、4（25％）と10（10％）も同様でした。余白を考慮してガターを残し、それを差し引くと、必要なパーセンテージで列幅が得られます。

すべてが順調に進んでいるようで、CSSとHTML（以下を参照）を作成し、Firefoxで試してみましたが、すべて正常に機能しました。しかし、Opera、Chrome、Safariで試してみると、問題が発生しました。列を並べて配置した場合、合計が100％になるとは思われず、わずかに不足しているように見えました。列が多ければ多いほど、問題は悪化しました。10列で、問題は非常に顕著でした。

なぜこうなった？Firefoxの動作は正しいですか、それとも他のブラウザで何が起こっているのでしょうか。さらに重要なことに、すべてのブラウザで一貫した結果を生成するために、どのように回避すればよいですか？

以下のコードのJSFiddleを作成しました。これは、ここから入手できます。完全なテストページもここから入手できます。（JSfiddleは関連するコードですが、ページ全体には追加のものもあります）

列を実行するためのCSSは次のとおりです。

私がテストしている（カットダウンバージョンの）マークアップは次のとおりです。

赤いボックスが緑のボックスと同じサイズではないのはなぜですか？（2つの画像をオーバーレイするため、絶対位置が必要です）

私は何が間違っているのですか？

私はhtml、css、およびjavascriptを初めて使用します。10年前にhtmlをいじったときに、フレームでこれを実行できたのを覚えています。左側に目次、右側に目次が必要です。コンテンツとして使用したいHTMLページが5つあります。すべてのページでナビゲーションとタイトルが同じである1つのページがあり、フレームのないコンテンツ領域に5つのコンテンツページがある場合、これを実現できますか？私はこのhtml/cssをベースとして使用しています：液体の2列のページ。左のセクションをより細くするために変更します。

index.liquid ページ (ホームページ) で使用できる Liquid マークアップの簡単なスニペットはありますか?

これを行う方法を知っておく必要があることはわかっていますが、SOとインターネットでの検索のすべてで、それは私を回避しています。友人が、固定幅の中央揃えラッパー (幅 990 ピクセル) のページを希望しています。左と右にはコンテンツがありませんが、リキッド レイアウトのようにヘッダーとフッターをページの端からはみ出させたいと考えています。私はこのようなサイトを構築したことがないので、行き詰まっています。固定幅の中央揃えのラッパーのみを使用しています。

テーブルではなく CSS でこれを実現したいのですが、それが彼の好みです。

ヘッダーは真っ黒ではなく、BG イメージとして繰り返される薄い .png です。

フッターはBG単色です。

ページは現在、中央のラッパーに含まれる適切なヘッダーとフッターで設定されていますが、左右に何も伸びていません。

ページリンク: http://www.jalvisualmedia.com/testsite/mystique/private_label.php

役に立ちそうなものを省略している場合は、お知らせください。