入力を含むdivがあります。div の内容は可変ですが、背景色で確認すると、周囲の div の高さと幅を拡張して入力を囲むにはどうすればよいですか。
サンプルは http://jsfiddle.net/fallenreaper/pL6Ua/にあります。
目標は、幅が調整されると、すべてのボックスが下に移動することです。
私は次のようなことを試しました:
position: relative;
しかし、周囲のdivを完全にラップしていません。私は何が欠けていますか?
編集: javascriptは、私が取り組んでいる拡張ツール用です。画面に表示されている項目は次のとおりです。
$alt_item
Edit2: div のコンテンツは動的であるため、すべてをプッシュして対応できるようにする必要があります。基本的には、*$("#dtr_list > div")* の高さを 80px に設定すると、次のようになります。
オプションとして Javascript を使用して、すべての子の最大 (高さ + 上) を見つけ、高さ = をそれに設定することを考えていました。
編集3:
var maxH = 0;
$($("#dtr_list > div")[0]).children().each(function(){
$("#altdata").append("Top: "+$(this).position().top + " Height: "+ $(this).height()+ "<br />");
if(($(this).position().top + $(this).height()- $(this).parent().position().top+5) > maxH)
{
maxH = $(this).position().top + $(this).height() - $(this).parent().position().top + 5;
}
});
$("#altdata").append("maxH: "+maxH);
$("#dtr_list > div").css("height", maxH);
このJavaScriptはそれを解決しますが、プログラムで行う必要があるのは好きではありません. 私が追加した+5はマージンのためでしたが、+5をハードコードされた数字として次のように置き換えることができます:
Number($(this).parent().css("margin").match(/^\d/))