0

青の div にコンテンツを追加するときに、緑の div の高さを滑らかにしようとしています。赤の div は正常に機能しますが、緑の div は機能しません。

したがって、blu div にコンテンツを追加するときは、緑の div を赤の div と同じくらい流動的にしたいと考えています。ここにコードがありますhttp://jsbin.com/ivobav/1/edit

4

2 に答える 2

0

これは、フロートの子に合わせて親が伸びないために発生します。この問題を回避するには、次のいずれかを実行できます。

  • フロートを使用しない
  • <div style="clear:both"></div>親コンテナの最後の要素として同等のものを挿入する
  • それ以外の場合は、親内にフローティングされていないコンテンツがあります

編集:より完全な説明については、http://www.quirksmode.org/css/clearing.htmlをご覧ください。マイクの答えはそれを行うための最良の方法ですが、残念ながらすべての場合に機能するとは限りません. これは人々が解決策を考え出そうとした問題のように見えますが、実際にはバグではなく、仕様であることに注意してください。フロートに合わせて要素を引き伸ばすために、新しい標準 CSS プロパティを導入するよう誰かに指示してください.. .

于 2013-02-21T01:17:05.403 に答える
0

ここでは複数のことが行われています。まず、緑色の div で流動的な高さが必要な場合height: 90%は、CSS から削除する必要があります。これにより、緑色の div が消えることに気付くでしょう (相対的に配置されたコンテンツが含まれていないため)。

緑の div に何かを入力すると、それが大きくなることがわかります。ここで、赤い div を緑の div 内にネストする必要があると想定しています。これを行うには、赤い div の絶対位置を削除する必要があります。

これを行うと、赤い div が消えます。これは、青い div がその中に浮いているためです。つまり、青い div を保持するために成長しません。したがって、赤い div に追加overflow: auto;するだけで、必要なものが得られます。

ここで結果を参照してください。

http://jsbin.com/ivobav/5/edit

于 2013-02-21T01:14:57.357 に答える