絕對定位的孩子的div的高度

我有一堆絕對定位的html，然後應該顯示的html代碼片段。但他們在一圈。絕對定位的孩子的div的高度

.drag-drop下一切都應該是絕對放置成的高度和寬度.drag-drop變爲零。展品按鈕和展品文字應在粗體顯示This is Drag and Drop Item後顯示。但由於.drag-drop的高度爲零，它顯示了.drag-drop的內容。

我以前有過這個問題，但幸運的是很容易計算.drag-drop的子女的身高，然後我將.drag-drop的高度設置爲使用javascript。這一次更難，因爲它包含更多的孩子，而且他們不是一成不變的。我將如何更改我的CSS，以便在拖放下顯示Exhibit？

來源

2013-07-18 ShaggyInjun

絕對定位從佈局中刪除元素，因此子元素不再是父元素大小計算的一部分。你需要使用JS來解決這個問題。

來源

2013-07-18 19:50:08

好的，謝謝你的回覆，你能指點我一個方向嗎？ – ShaggyInjun

我會建議看看現有的拖放腳本，如jQuery UI。 –

我已經使用jQuery用戶界面拖拽和droppables :) – ShaggyInjun

最好的方法是不要讓內容絕對定位。你可以讓他們相對定位，或浮動他們？您仍然可以操縱它們的位置，高度，寬度等，並且它們會有佈局，因此包含的div將具有正確的高度。

注意，如果你把它們飄浮，可能需要在包含div的底部添加一個「浮斷路器」得到它的計算正確的高度： .... <div>some floated content</div> <br style="float: none;"/> // float-breaker right before containing div closes </div>

否則以前的回答者是正確的，你我需要一些js hackery。

來源

2013-07-18 19:59:18 murdock

IMO的正確答案，但我會推薦一個clearfix類，而不是清除br。你應該儘量不要僅僅爲了造型而改變你的內容。 – Pevara

感謝您的回覆murdoch，但設置很奇怪。絕對的定位是沒有辦法的。這些是保存在服務器端的座標，發送到用戶界面，並期望相應地渲染事物。國際海事組織除了使用javascript來改變'.drag-drop'的高度以外，沒有別的辦法，這樣頁面的其他部分看起來就不錯了。 – ShaggyInjun

伊什，艱難的休息。希望你找到一個合理優雅的方式來破解。 FWVW PeterVR是對的，如果你發現自己處於這種狀況。 – murdock

絕對定位的孩子的div的高度

回答

相關問題