問題タブ [fluid-layout]

さて、サイトに実装する必要があるマップの側面について、流動的な css を検討しています。私が欲しかったものに似たこのデモを見つけました：

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-39-fluid-fluid-fluid/

左の列と右の列を流動的にして、より大きなブラウザー ウィンドウで展開できるようにする方法はありますか。しかし、それぞれ 175px など、特定の幅以下に制限することはできませんか?

そのため、一部のユーザーのためにブラウザーのスペースがもっとある場合は、それを使用できるようにして、3 つの列すべてを流動的にできるようにしたいと考えています。ただし、ブラウザー ウィンドウがどれほど小さくても、左右の列が特定の幅を下回ることはありません (モバイル アプリではなく、モバイル ブラウザーを除く)。

これに対する答えはすでにわかっていると思いますが、サニティ チェックが必要です。

私が持っていると言う

RESULT=TARGET/CONTEXT を使用して、幅をパーセンテージに変更できます。この場合、コンテキストは max-width が 1000px に設定されたコンテナーなので、次のようにできます。

ウィンドウを縮小すると、div は常にそのコンテナーに比例します。でもやりたいと思ったらどうしよう

現在 570 になっているターゲットに基づいて幅を調整できますが、ウィンドウが縮小されると、プロポーションがすべて同期しなくなります。

パーセンテージ境界線を使用できません。コンテキストをチェックし続けるために JS を使用したくありません。CSS3 の box-border 宣言はまだ使用できません。

Ethan Marcotte によるレスポンシブ Web デザインで説明されている技術を使用したい場合、すべてが相互に関連して縮小するというテクニックを使用したい場合、境界線を使用するとうまくいきませんか?

乾杯！

Briefly:

How do I lay out N columns of random height portlets all in CSS so that if the browser is resized, the number of is columns reduced (using @media (min-width:)) and the portlets still sit nicely together on the page with no gaps.

This is similar to Float multiple fixed-width / varible-height boxes into 2 columns but more general.

Detail:

I've built a web application (PHP / Zend Framework) with a "dashboard" page made of a series of portlets. The portlets can be arranged in 1, 2, 3 or 4 equal width columns (user selectable) in a fluid layout. When the user resizes the browser window, the columns expand to fill the available width and the portlets also expand horizontally. The vertical height of each portlet is defined by its content. Some are only 1-2 lines, others can be 30-40+ lines of text / tables / image etc.

I want to turn this into a "responsive design" so that the user doesn't have to select the number of columns. On a small screen (eg iPhone) only one column will display. On a wide screen they might have 4 or 5 columns. If the browser window is resized, the number of columns will adjust up or down to allow portlets to stay approx 300-400 pixels wide.

I think I can do this with a bit of jQuery and some server side support (PHP), but would prefer to do it all in CSS if possible (no / minimal javascript).

私は多くの画像を含む写真サイトで作業していますが、このサイトを 100% 流動的にしたいので、高さと幅が固定されていません。画像の醜い Chrome 再描画をどのように回避しますか? (つまり、画像は最初に高さゼロで表示され、次にレイアウト全体を移動する最終的なサイズに再スケーリングされます)

私はほとんどすべてを試しましたが、最後のオプションは、画像の再描画を黒い div で非表示にし、画像の読み込みが完了したら不透明度を 0 に設定することです (ところで、これを (document).ready 呼び出しで試しましたが、早すぎるようです: どうやってそれをしますか?)

ページに（ポートフォリオ用の）写真の基本的なレイアウトがあります。2 つの異なるサイズのイメージ ブリックがあり、大きい方が小さい方に比例し、幅と高さがちょうど 2 倍になり、ブロックまたはウィンドウの間に余白がありません。数十個の小さなブロックと混ざった数個の大きなブロックしかありません。これはレスポンシブ デザインであるため、フルサイズのサイトでは 20% の列が 5 つ、ウィンドウ サイズが特定の幅を下回ると 33.333% の列が 3 つになり、すべて 100% の最大幅のコンテナー内に収まります。画像は CSS を使用して幅 100%、高さ自動に設定され、各ブリック内にあります。私が説明していることを説明するために、ワイヤーフレームを含めました。

私が抱えている問題は、アイソトープを流体レイアウトに対応させることです。最大幅より広いウィンドウにページをロードすると、ブロックが正確に期待どおりに配置されます。ただし、ブラウザー ウィンドウを最大幅よりも小さくすると、ブロックが非常に不安定になり始めます。次のようなバリエーションがあります。間に空の列がある 2 つの列に積み重ねられます。画像間のギャップ; 大きな画像の下に空の行を残します。

私はおそらく自分自身をうまく説明していませんが、流動的なレイアウトでIsotopeを使用した経験があり、洞察を持っている人がいるかどうか疑問に思っています.

固定および流動的なCSS列用の堅実なクロスブラウザソリューションはありますか？1つのカラムを左側に固定し、もう1つのカラムを右側に流動的にする必要があります。

以下は私のコードの抜粋です-.promoImgそして.promoContent互いに並んで浮かんでいます。#recommendsはブラウザ幅の90％で、 120pxに修正する必要があり、流体を伸ばし.promoImgたいです。.promoContent

http://seesparkbox.com/にあるものとよく似たナビゲーション バーで作業しようとしています 。通常、ユーザーがコンピューターのブラウザー ウィンドウでページを表示している場合、ナビゲーションを完全に水平にしたいと考えています。

ただし、ユーザーが狭い幅からナビゲーションを見ている場合 (ナビゲーション バーの行の折り返しが発生する)、ナビゲーション テキストの上に会社のロゴを配置してナビゲーション バーを再フォーマットしたいと考えています。ブラウザのサイズに合わせてテキスト (リンク) のサイズを小さくします。

正しい方向に少しポイントが必要です。簡単な答えがあれば素晴らしいです。私は本当に助けに感謝します.もしあなたが知っているチュートリアルがなければ、私もそれを感謝します.

私はまだcssでかなり新しいです。

Webページのグリッドレイアウトを作成したい。現在のブラウザウィンドウのビューポートに正確に収まる9つのセルで構成されている必要があります。中央のセルは、幅と高さが固定され、水平方向と垂直方向の中央に配置されている必要があります。他のすべてのセルは、実際のブラウザウィンドウサイズに合うように動的に調整されます。

私はCSSのみのソリューション、おそらくオープンソースのCSSグリッドフレームワークを好みます。ただし、jQueryも問題ありません。