問題タブ [fluid-layout]

http://www.tinyfluidgrid.com/で流動的なレイアウトを作成しようとしています

ボディ（grid_16）の内側に2列のレイアウト（grid_12）を作成したいのですが、左側のバー（grid_4）と右側のバーがボディ全体をラップしていないのでどうすればよいですか？

cssの下：

http://960.gsグリッド システム/フレームワークを使用しています

特に「高さ」で、訪問者のブラウザクライアント領域の幅と高さをカバーできる柔軟なレイアウトを作成しようとして、頭から壁までパンチしています...次の画像を見てください

したがって、グリッド レイアウトはすべてをカバーする必要があり、スクロールバーがあってはなりません。ユーザーがサイズを調整すると、最小の幅と高さに達するまで、グリッドが適応する必要があります

あなたが私に与えることができるヒント/ハックをありがとう

わかりました、私は基本的に流動的なレイアウトを構築しています。私のHTMLは次のようなものです。

これがcssです：

私が知る必要があるのは、要素が互いに下に移動せずにサイズを#center変更したときに、どのようにサイズを変更するかです。#container

ListViewをTileviewに設定しています。ListViewの幅は300であり、タイルの幅も同様です。

これは、タイルの数がオーバーフローしてスクロールバーが発生しない場合に正常に機能します。

ただし、オーバーフローした場合、垂直スクロールバーが表示されると、垂直スクロールバーがタイルのリストビュー幅を下げるため、水平スクロールバーも表示されます。リストビューを埋めるためにタイルのサイズを自動変更する方法はありますか？

画像の例を参照してください。

現在何が起こっているか：

私がしたいこと：

幅を100％に設定してみましたが、うまくいきません。何か案は？

過去 1 日か 2 日かけて作成したページを磨き上げていて、box-shadow を使用した後に問題が発生しました。誰かがこれを簡単に修正する方法を教えてくれることを期待していました。

セットアップ: width、max-width、box-shadow など、いくつかのプロパティを持つ div があります。

問題: 「box-shadow」プロパティにより、div 要素の幅が 40 ピクセル (両側で 20 ピクセル) 追加されます。コンテンツが 100% 幅の属性に達するほど画面が小さい場合、水平スクロール バーが表示されます。CSS を掘り下げた後、div が技術的には width: 100% + 40px; のようなものだったことが原因であることがわかりました。

私が試したこと: 親divにoverflow:hiddenを設定することを検討しましたが、コンテンツにアクセスできなくなる最小幅を設定しています。また、box-shadow CSS のサイズ引数にパーセンテージ (たとえば 1%) を使用して、div の幅を 98% に設定しようとしましたが、box-shadow CSS はパーセンテージを受け入れないようです。サイズ。また、javascript を使用してブラウザーの幅をテストし、それに応じて box-shadow 要素を表示または非表示にすることも検討しましたが、最適なソリューションとは思えません。

これを処理するためのより簡単な方法が必要です。考え？

今までは横幅1024ピクセルのモニターを対象とした固定配置のレイアウトパターンを使っていました。左右に余白がある980ピクセルくらいに固定されていると思います。最近、フレームをモニターの幅まで広げることができる固定されていないソリューションについて考えていました。しかし、モニターの解像度が非常に高いものもあり、ページが広すぎて見苦しくなります。したがって、最大幅と最小幅も設定するとよいでしょう。

まず、固定レイアウトを使用しない場合は何と呼ばれますか? これに名前はありますか？

このスタイルを採用する際に考慮しなければならないデメリットはありますか?

このスタイルをポータル サイトに適用したいと考えています。このサイトでは、各列の中に多くのボックスがある 3 列のデザインを使用しています。

以下に注目すべき「流れるような」デザインの例をいくつか示します:
http://addons.mozilla.org/
http://en.wikipedia.org/

したがって、オーバーフロー: コンテナ内の div で非表示にすると、流動的であると思われるときに div の幅が制限されるというこの問題に遭遇しました。したがって、基本的に私はこれに似た構造を持っています:

この状況では、leftColumn div は固定幅であり、rightColumn は可変であり、残りの幅を埋めることになっています。問題は、overflow: hidden を rightColumn (背景色がある) に追加すると、幅が指定した最小幅に縮小することです。残りの幅スペースに拡張する方法はありますか? これが私が現在CSSのために持っているものです：

考え？

確かに、CSS の垂直方向の配置に関する質問の山に追加したくはありませんが、解決策を見つけるのに何時間も費やしましたが、まだ役に立ちません。状況は次のとおりです。

画像のスライドショー ギャラリーを作成しています。ユーザーのウィンドウが許す限り画像を大きく表示したい。だから私はこの外側のプレースホルダーを持っています:

(はい、HTML5 要素を使用しています)。次の CSS があります。

次に、その中に画像を配置します。画像の向きに応じて、幅または高さのいずれかを 75% に設定し、もう一方の軸を自動に設定します。

そのため、流体の外側のコンテナがあり、内側に流体の画像があります。画像の水平方向の中央揃えは機能しますが、コンテナ内で画像を垂直方向に中央揃えする方法が見つからないようです。センタリング方法を調査しましたが、ほとんどの場合、コンテナーまたは画像の幅または高さが既知であると想定しています。それから display:table-cell メソッドがありますが、これも私にはうまくいかないようです。

私は立ち往生しています。CSS ソリューションを探していますが、js ソリューションも受け入れています。

流動的な幅の jQuery 画像カルーセルを知っている人はいますか?

私はこれを見つけました: http://www.nikolakis.net/liquidcarousel/ ...しかし、速度を下げると恐ろしいように見えます。

さらに、マウスがある方向に移動したときにアクティブにしたいのですが、スライダーは反対方向に移動する必要があります。ところで、それは何と呼ばれていますか？

前もって感謝します。

アプリの流動的なレイアウトを作成しようとしていますが、高さのパーセンテージにcssを使用するのに問題があります。ウィンドウの垂直方向のサイズからこのパーセンテージを取得する場合は、ウィンドウの水平方向のサイズを使用して高さ％を指定しています。これは可能ですか、それとも私は運が悪いですか？

xとyは、要素になりたいパーセンテージです。どちらも窓の横の大きさで決まりますので、それぞれの軸を使ってもらいたいです。