1

この例を見てくださいhttp://jsfiddle.net/xcYum/1/

  1. div タグ (class=progress を使用) が、コンテンツが 1 行ではなく 2 行に分割されている理由を知りたいです (つまり、進行状況と\n進行状況)。「div class=progress」の幅を指定する必要はありません。すべての css および/または html 要素タイプ (または何らかの理由でボックス化) を含む説明を教えてください。ルールが機能する場合と機能しない場合を暗記するのではなく、ルールが実際にどのように機能するかを正確に知りたいだけです。

  2. .container css を次のように変更すると思われます: .container { position: relative; 次に、div タグ (class=progress を使用) が 1 行で表示されるようになりましたが、相対と絶対でこのような違いが生じるのはなぜですか? それともネストされているためですか？

  3. ネストされた絶対位置の div タグをどのように回避しますか?? そのような構造を持つことは間違っているか悪い習慣ですか？この例で使用しているのは、「100%」と「進行状況」を「div class=container」タグに基づいて配置したいためです。その後、「div class=container」タグを移動するだけです。つまり、この方法では、1 つのもの (「div class=container」タグ) を移動して 2 つのもの (100% と「進捗状況」) を移動することができます。ここでの私の思考プロセスの何が問題になっていますか?

4

2 に答える 2

1

  1. 絶対配置された要素はシュリンク ラップするため、言い換えると、可能な限り小さくなります。を使用して、テキストを折り返さないようにすることができますwhite-space: nowrap

  2. なぜこれが起こるのか分かりません

  3. 親と一緒に移動する要素の子の絶対配置は必要ありません

于 2012-04-04T06:56:01.483 に答える
0

  1. 絶対要素は、通常のフローの子、および位置プロパティが絶対に設定されている子孫に対して、新しい包含ブロックを確立します。

    参照: http://reference.sitepoint.com/css/absolutepositioning

  2. 最初の回答と同じ

  3. 絶対要素は、それを含むブロックに対して配置されます。したがって、親の 'div class=container' が相対位置を持つだけで、絶対位置を持つすべての要素が一緒に移動します。

    参照: http://reference.sitepoint.com/css/absolutepositioning

于 2012-04-04T07:11:55.387 に答える