9

min-width max-width と width 100% の適切な例を説明してください。なぜこれを特別に使用する必要があるのですか?

編集

ほとんどのコンピューターの解像度が一致する最小幅には何を使用すればよいですか。ほとんどのコンピューターの解像度が一致する最大幅には何を使用すればよいですか。

編集 yahoo.com の使用としてより良い例が必要です

4

4 に答える 4

14

min-width: 50px に設定すると、デフォルトで div の幅は 50px になります。div 内のコンテンツの幅が 50px を超える場合、それ (最小幅の div) が拡張されます。

max-width: 50px に設定し、div 内のコンテンツの幅が 50px を超える場合、(max-width の div) は拡大されず、オーバーフロー設定によっては水平スクロールが表示される場合があります。

width:100%デフォルトでは div の幅は 100% ですが、フローティング div があり、コンテナの水平方向のスペースをすべて使用したい場合は、width:100% が役立ちます。

于 2013-03-14T12:22:29.067 に答える
5

それは非常に一般的ですが、次のとおりです。

  • min-widthは、幅を % で設定していて、要素を小さくしたくない場合に非常に便利です。

    <div style="100%">
    <div style="width:30%;min-width:50px;"></div>
</div>

したがって、親 div が小さすぎる場合、子は少なくとも 50px になります。

または、div が親ウィンドウの幅に依存している場合に使用できます。最小幅は、幅および最大幅よりも優先度が高くなります。

于 2013-03-14T12:29:49.287 に答える
1

最小幅:

div の最小幅。指定された幅ほど小さくなることはありません。

min-width:50px の場合、div は常に最小 50 ピクセル以上になります。

min-width:50% の場合、div はオブジェクトの 50% になります。

(1200px の div の場合は 600px になります)

(最初の div の場合、画面の 50% になります)

最大幅

は最小値と同じですが、これ以上大きくなることはありません。したがって、次の場合：

最大幅:50%

div は、オブジェクトの 50% より大きくなることはありません。

各解像度でページをまったく同じに見せたい場合は、% を使用します。

幅が 80% の 1 つの div がある場合

 <div id="1">

幅50％の1 div

   <div id="2">

div 2 は 80% の 50% になるため、ページ全体の 40% になります。

幅のない div がある場合は、最小幅と最大幅を使用できます。

コンテンツに応じて、div は min-width と max-width の間になります。

width:100% を使用すると、div がオブジェクトの幅の 100% になります。

最初の div が画面の全幅の場合。

width:500px の div にある場合、div は 500 px の 100% になるため、500px

于 2013-03-14T12:21:04.890 に答える
1

min-width最小幅を固定するために使用され、指定された範囲の幅の値の後、div は自動的に拡張を開始します

max-width範囲 div が拡張されない後、最大幅を指定するために使用されます。

width:100%ブラウザ/親要素の利用可能なスペースに div を拡張します

于 2013-03-14T12:22:14.047 に答える