問題タブ [variable-width]

可変幅の浮動要素を水平方向に中央揃えにする方法は?

編集：私はすでにdiv、浮動要素のコンテナを使用し、コンテナにを指定しwidthて（コンテナに使用margin: 0 auto;）、これを機能させています。包含要素を使用せずに、または少なくとも包含要素に a を指定しなくても実行できるかどうかを知りたかっただけwidthです。

私はウェブサイトをデザインする方法を学んでいます。決定の1つは、データをユーザーに提示する方法、つまり、さまざまなモニターサイズが存在する場合、データを画面全体を占めるように構成するか（GMail）、固定幅にするか、つまり標準のモニターサイズを選択するか（ 1024x768）、すべてのモニターで同じように表示されるようにします（別名StackOverflow）。

私は可変幅設計に傾倒しています。私が理解しようとしているのは、この設計上の決定がプログラミングにどのような影響を与えるかということです。つまり、可変幅のデザイン（具体的にはCSSの使用法）を使用してWebサイトをプログラミングする場合、何を覚えておく必要がありますか？

VT100 スタイルの端末処理は、固定幅フォントを扱います。

Windows の Putty で Comic Sans MS のような可変幅フォントを使用することはできますか? はいの場合、どのように行うことができますか？

私はあなたがここで見ることができるお問い合わせフォームでウェブページをデザインしています。

ご覧のとおり、ページは可変幅になるように設計されています。画像、フォーム、コンテンツ領域の端の間に等間隔、つまり等幅の4つのスペースが必要です。

現時点では、画像が幅20％のDIVの中央に配置され、コンタクトフォームが幅60％のDIVの中央に配置されるように設計しました。これは問題なく機能しますが、ブラウザの幅が大きくなるにつれて、連絡先フォームと画像の間の間隔が画像とコンテンツ領域の端の間の間隔よりも大きくなるため、あまり良くありません。すべてのスペースを同じ幅に保つ方法を見つけたいと思います。

関連するCSSは次のとおりです。

関連するHTMLは次のとおりです。

誰かがこれを手伝ってもらえますか？

ありがとう、

ニック

幅が可変で、幅が最長の行よりも小さい場合にスクロールバーを表示するdivをWebサイトに追加したいと思います。このような固定幅の要素を可変幅（100％）でラップしようとしましたが、うまくいきませんでした。ページ全体にスクロールバーが表示されました。

何かご意見は？

ありがとうヤロン

次の 3 列のレイアウトを機能させるのに問題があります。

どこ：

• Aは固定幅です。
• Bは、列 A と C で使用されていないコンテナー内の使用可能なスペースを使用します。
• Cには、幅が変更される可能性があり、B を別の幅に「プッシュ」する必要があるコンテンツが含まれています。

これを作成するための私の最善の試みは次のとおりです: http://jsfiddle.net/x3ESz/

私が調べた他のすべてのトピックでは、3 つすべてをマージンを使用して B でフローティングとして折り返しを防止することを提案していますが、これでは C が C のコンテンツに基づいて B のサイズを変更することはできません (B の右マージンに値を指定する必要があるため)。

また、これを達成するために JS に頼るのも避けたいと思っています。

可変幅のコンテンツの左側に固定幅メニューがある可変幅HTMLレイアウトがあり<div>ます（css max-widthとmin-widthで設定）。非常に狭いブラウザウィンドウの場合、コンテンツをメニューの下に折り返したいのですが、現在float:left、メニューとコンテンツの両方を設定することでこれを実現しています。

この例では、div現在、ブラウザのビューポートが1000px（メニュー幅+コンテンツの最大幅）よりも小さくなるとすぐにコンテンツの折り返しが発生します。最初にコンテンツの幅を狭くし、ビューポートが500px幅（メニュー幅+コンテンツの最小幅）よりも小さい場合にのみコンテンツをメニューの下にラップさせたい

現在のfloated<div>の配置を使用するか、それ以外の方法でこれを実現する方法はありますか？

左側に固定幅の画像を持つ div と、背景色を持つ可変幅の div が必要です。これは、デバイスで幅を 100% 拡張する必要があります。2 番目の div が固定 div をオーバーフローするのを止めることはできません。

可変幅のdivにoverflow:hiddenを追加すると、写真の下の次の行にジャンプします。

これを正しい方法で修正するにはどうすればよいですか (つまり、後でメディア クエリを使用してサイトをレスポンシブにする必要があり、デバイスごとに他の解像度の画像で画像を変更する必要があるため、ハックやマージン左を使用しないでください)。

• レスポンシブ Web サイトの恐ろしさに立ち向かおうとしている初心者の Web デザイナー -

HTML:

CSS:

細い左側のバーから飛び出す拡張可能なメニューがあります（男性を開いてメニュータイプを閉じる）

大多数の場合、開いているときを除いて、約 50px を占めます。約 250 のときです。

#content div を残りの 100% にしたい。したがって、メニューが開いたときに 100% ページ - 50px、次に 100% ページ -250px になります。

以下は私の HTML です。これを実現するために必要な基本的な CSS は何ですか?

ラッパー内の2divを分離するために、余分な行を入れたことに注意してください

.

.

.

救助への図...

メニューを閉じました

メニューを開く

これは私がテストしたコードです

("#content").css("width",cont_div_width+"px");

("#content").css("width",cont_div_width+"px"); }

どこ

と

と

さまざまな画面サイズに合わせる必要がある Web サイトがあります。そのほとんどは非常に簡単ですが、画面サイズに合わせてサイズを変更し、画像をページの中央に配置する必要があるスライドショーがあります。サイズが変化しても両側に余白がないように、画像はページよりも幅が広くなっています。

フルサイズの画像は幅 4800px ですが、これはブラウザのサイズによって異なります。

画像を 1 つのサイズのみでセンタリングするという問題であれば、

しかし、空きスペースに合わせて画像のサイズを変更しているため、常に画像の高さ全体を表示できるため、表示される画像の幅が変化し、その中央揃えの方法は良くありません。

では、javascript を使用して現在の画像の幅を確認し、margin-left プロパティを変更するにはどうすればよいですか、それとも css で行うことができますか?

ここにCSSを少し追加するために編集します：

これは、ブラウザ/画面サイズに応じて、使用可能なスペースに高さ方向に収まるように画像のサイズを変更します。しかし、センタリングが欠落しています。