問題タブ [fluid-layout]

http://jsfiddle.net/vrcQp/

これらのボタンを中央に配置したい (3 つのバージョンは、同じものの異なるバージョンを表す)..そのため、css と html はすべて同じにする必要があります..項目の数だけを変更する必要があります。

幅を設定して、インライン要素を使用できないようにしたい（テキストを中央に揃えるだけ）。

また、異なるスタイルシートを使用してボタンを垂直方向に柔軟に積み重ねるためにも使用できるように、html マークアップを十分にシンプルにする必要があります。

これを達成する方法について何か考えはありますか？私は方法を見ていません。

現在、1 ～ 3 個の要素があります。理想的には、任意の数をカバーする可能性がありますが、それは必須ではありません。そして、IE6で動作するようにしたい..

HTMLセットアップ

CSS：

問題は、中央の列に最小幅が必要ですが、右側の列が中央の列に移動しないようにする必要があることです。

Fluid width コンテナー DIV があります。

この中に、すべて 300px x 250px の 4 つの DIV があります...

私が実現したいのは、ボックス 1 を左に、ボックス 4 を右に、ボックス 2 と 3 を等間隔に配置することです。ブラウザを小さくするとスペースも小さくなるように、スペースも流動的にしたいと思います。

流動的なレイアウトのウェブサイトやチュートリアルの例を教えてください。

さらに重要なのは、流動的で、デスクトップブラウザとモバイル/タブレットブラウザ （iPadなど）の両方に簡単に拡張できるUIデザインを探していることです。

また、デスクトップ/モバイル/タブレットブラウザ間で機能するUIレイアウトを設計するためのその他の最良の方法。

私がモバイルと言うとき、私は主に少なくとも7"の画面サイズのタブレットを指します

できるだけ多くの例を挙げてください。

すべての解像度で div を特定の幅 (80%) にして、ブラウザでこの div のサイズも変更し、幅だけを変更します。幅の CSS のみを使用する必要があり、JavaScript は使用しません

私はこれを持っています：

サイズを変更したり、低解像度で表示したりすると、この div が他の div の上に表示されます。何か案は？

ありがとう

CSS で完全に流動的なレイアウトを作成しようとしています (すべて % で表示)。これは、プラットフォーム間 (デスクトップ/モバイル/iPad などのタブレット) でシームレスに動作します。

Fluid Layouts を使用すると、画像を完全に流動的にすることができますか? 例えば：

• これは、任意の範囲またはウィンドウ サイズに調整/適合することを意味しますか?
• また、これは背景画像にも適用できますか?
• このプロパティには、ブラウザの実装などに関して制限はありますか?

CSS 流動レイアウト (アダプティブ/レスポンシブ Web デザインに基づく) を使用して Web サイトを設計しています

したがって、固定値、つまりpxで何も与えません（％のみを使用）

私の質問は; コンテナーの幅を 100% にすると理解できますが、ブラウザー ウィンドウ (またはビューポートの幅) に基づいて計算されます。しかし、本文のフォントを 100% または 1 em と言うときのようなフォント サイズはどうでしょうか。それはどのように計算されるのでしょうか? また、表示されるフォント サイズは、デスクトップとモバイル デバイスで同じになりますか?

柔軟な幅が設定されたDIVがあります（例：min-width：800pxおよびmax-width：1400px）。このDIVには、固定幅が200pxでdisplay：inline-blockのボックスが多数あります。したがって、親DIVの幅に応じて、これらのボックスはスペース全体を埋めます。

私の問題は、親divの可変幅によって引き起こされる右側の空白です。この空白スペースは小さくて見栄えがよい場合もありますが、親divの幅が異なると、この空白スペースはほぼ200pxになります。

問題を十分に詳しく説明した場合、この写真が私の実際の状況を説明するのに役立つことを願っています。

そして、これが私が欲しいものです：

この自動マージンは、TABLEを使用することで簡単に実現できます。ただし、正確な列数はユーザーの画面解像度に依存するため、わかりません。そのため、テーブルを使用することはできず、CSSに固執します。

誰もがこれを解決する方法を知っていますか？コメントと回答をよろしくお願いします。

編集： IE6のサポートは必要ありません。IE7をサポートしたいのですが、制限があることを知っているのでIE7はオプションなので、IE7ではおそらく固定幅の「div.wrapper」を使用します。

EDIT2これらのボックスの複数の行を処理する必要があるため、「 div.wrapper」ボックスを超えず、1つの長い行だけでなく、複数のボックス行で正しく折り返されます。

EDIT3「列」の数は、ユーザーの画面解像度によって大きく異なるため、わかりません。したがって、大画面では1行に7つのボックスがあり、小画面では1行に4つのボックスしかありません。そのため、1行に固定数のボックスを設定しないソリューションが必要です。代わりに、ボックスが1つの行に収まらない場合は、次の行に折り返す必要があります。

私は大きな画像をスタイリングしている流動的なレイアウトを構築しようとしています:

これは問題なく動作します。問題は、html の img タグで幅と高さの属性を使用できなくなったことです (効果はありません)。これらの属性が必要なのは、ブラウザが画像が読み込まれる前に必要なスペースを「節約」できるようにするためです。これにより、画像が読み込まれたときにページの残りの部分が移動しなくなります。

両方の機能を持つ方法はありますか？(流動的な画像 + 画像の読み込み前に保存されたスペース)

I am building a prototype mobile web application and trying to get 3 fluid but "equal" columns using just css, I have made the assumption I can use 33% on two columns and 34% on the last column. However this doesn't equal 100%... Any ideas?

Basic maths tells me that 33 + 33 + 34 = 100 however in Chrome (Desktop) and Safari (iPhone 4 iOS5) I get some left over container div background colour.

This seems to be a bug with webkit since firefox can render this correctly.

Can anyone recommend a solution or is anyone else experiencing this problem?