2011-07-11 9 views
0

html要素は、その内の静的なコンテンツの最小幅を持っている必要があり、その内の静的なコンテンツの最小幅を持っている必要がありますhtml要素は、パーセント幅を持つ

こんにちは、私は流体を作成しようとしています/レスポンシブレイアウト。パーセンテージの幅を持つhtml要素に内部コンテンツの最小幅を強制的に与える方法はありますか?つまり、内部コンテンツに200pxなどの静的な幅があるとしますか? http://www.nathanielkessler.com/div/csshelp.html、IE9にあなたが癖モードに設定し、中と外のウィンドウのサイズを変更する場合は

、それは私が望む正確にように振る舞う:

は、ここでの例です。 (画面が内側にリサイズされたとき、左の最初のdivの下で右の2番目のdivがどのようにポップするかに注意してください)。

文書をIE9標準モードに戻してから内側にサイズを変更すると、赤い枠線で囲まれた外側のdivが内部の内容(黄色のボックス)を遵守していないことがわかります。私はちょうどその境界にあるべきものを超えて縮小し続けています。
quirksモードと同様に動作させる方法はありますか? (JavaScriptなし)

答えて

0

ありがとう、私は結局、私がその後の行動を与えた非常に特定のCSS/HTMLの組み合わせを見つけることに終わった。すべての主要なブラウザで動作します。すなわち、ie7〜ie9を含みます。

基本的に、左のフローティング要素の行には、最初の要素にmin-width%設定を与え、残りの要素にmin-width% + width%...あなたは、ブラウザウインドウが縮小したときに要素を兄弟要素の下に落とす流体レイアウトを取得します。

実際の例ですが、ブラウザのサイズを変更してみてください。 http://www.nathanielkessler.com/div/cssfluid.html

+0

私のために最も右の要素だけがドロップされ、中央の列は最終的に画面外になり、スクロールバーは表示されません。 Firefox 5。 – shanethehat

0

CSS属性はmin-widthです。セット.item { min-width: 200px; }

関連する問題