html - パーセンテージ幅の html 要素には、その内部の静的コンテンツの最小幅が必要です

Question

パーセンテージ幅の html 要素には、その内部の静的コンテンツの最小幅が必要です

こんにちは、流動的/レスポンシブなレイアウトを作成しようとしています。パーセンテージ幅を持つ html 要素に、その内部コンテンツの最小幅を強制する方法はありますか? つまり、内部コンテンツに 200px のような静的な幅がある場合はどうなりますか?

例を次に示します: http://www.nathanielkessler.com/div/csshelp.html

IE9 で Quirks モードに設定し、ウィンドウのサイズを変更すると、希望どおりに動作します。(画面のサイズを内側に変更すると、右側の 2 番目の div が左側の最初の div の下に表示されることに注意してください)。

ドキュメントを IE9 標準モードに戻し、サイズを内側に変更すると、外側の赤い枠で囲まれた div が内側のコンテンツ (黄色のボックス) を尊重していないことがわかります。私はその境界を超えて縮小し続けています。
quirks モードのように動作させる方法はありますか? (JavaScript なし)

Answer 1

おかげで、私が望んでいた動作を実現する、かなり具体的な css/html の組み合わせを見つけることができました。ie7 から ie 9 を含むすべての主要なブラウザーで動作します。

基本的に、左側のフローティング要素の行で、最初の要素に min-width % 設定を与え、残りの要素に min-width % + width % の組み合わせを指定すると ...要素を強制的にブラウザー ウィンドウが縮小すると、兄弟要素の下にドロップします。

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

Answer 2

min-widthあなたが望むのはCSS属性だと思います。設定.item { min-width: 200px; }