次の HTML コードがあります。
<div id="my_div" style="height:400px"></div>
<hr>
<input type="text" id="my_input">
my_divには後で (jQuery を介して) データが取り込まれますが、問題は、
<hr>
my_divの後ろに表示されますが、my_inputは本来あるべき場所 (つまり、my_divの後) にあります。
誰かが理由を知っていますか？
編集: ブートストラップ css クラス (span10) がこの問題を引き起こしていました。そのクラスを削除した後、機能しました。
あなたが提供した情報から判断すると、あなたが配置しているコンテンツに依存する可能性があると思います. ここでわかる<hr>ように、 は div の下に表示されているはずです。
これを引き起こしていると考えられる 1 つのケースは、CSS を使用してフローティングされたコンテンツを div 内に挿入する場合です。その場合、div は、そこに含まれる最後のフロー (フロートされていない) 要素の高さに「縮小」します。これにより、内部に非フロート要素がない場合、高さが 0 に縮小されます。
その場合は、次の CSS を に追加することで回避できます#my_div。
#my_div {
overflow: hidden;
}
この種の問題には他の回避策もありますが、これが最も簡単に試すことができ、それが影響している問題かどうかを確認できます。
影響を受ける可能性のある別の問題は、div の高さが 400px に制限されていることです。div のコンテンツがその高さを超えると、div の境界が押し下げられず、代わりにオーバーフローします (クイック デモンストレーション)。その場合は、divheightをautoに設定してコンテンツに合わせて伸びるようにするか、微調整してコンテンツが div の高さを超えないようにすることができます。
これは、div の高さが 400px に固定されているためです。コンテンツによってオーバーフローする可能性がありますが、指定された高さを超えて他のブロックを移動することはできません。min-height: 400pxおそらく、代わりに設定する必要がありますheight: 400px。