下面的數據佈局正在向上移動設置顯示：無

我正在開發一個HTML/JS頁面。它有2個容器 - 容器1和容器2。下面的數據佈局正在向上移動設置顯示：無

在容器1中，我有一個訂單輸入表單。在容器2中，還有一些其他的文本和圖像。在視圖中，container1位於頂部，container2位於其底部。

所以我在做的是在容器1中 - 成功提交訂單輸入表單後，它隱藏表單並顯示訂單確認信息就地表格。下面的代碼對我很有幫助：

document.getElementById('form').style.display = 'none'; // hide form 
document.getElementById('confirmation_message').style.display = 'block'; //display confirmation message

它隱藏窗體並按預期顯示確認消息。

但是問題我面對的是 - 在執行上面的代碼之後，container2數據也向上移動並進入container1（位於確認消息的下方）。也讓我知道當我放大和縮小頁面時，它會自動在container2上正確設置container2數據。你能否幫我解決我錯過的財產？

請檢查bookmywatercan.com。我上傳了虛擬演示頁面。填寫表格並提交。謝謝你亂七八糟的時候會看到下面的內容向上移動。請幫忙。我需要有組織的形式在同一地點和container1下面的內容。

謝謝。

來源

2016-05-14 MeisterAjit

如果我正確理解您的問題，如果您希望container2留在相同的地方，則需要將visibility值設置爲「隱藏」，而不是將display值設置爲「無」。

兩者之間的差異之一是visibility: hidden;將保持頁面佈局內的元素位置，而display: none;會將該元素視爲它甚至不存在。

那麼試試這個相反，第一行：

document.getElementById('form').style.visibility = 'hidden'; // hide form

來源

2016-05-14 16:17:27 talemyn

是。你是對的talemyn。無論容器1會發生什麼，我都想將container2數據放在同一個地方。我甚至嘗試知名度：隱藏;但問題是它留下了空白。在我的情況下，如果我保留確認信息是2-3行，而表格是20-25行。所以第一次加載它如果我使用可見性：隱藏;對於確認消息，它留下了2-3行的空間，然後在使用可見性時提交表單：hidden;對於形式，它會留下20-25行的空白空間。它看起來不太好。我只需要根據內容採取。 – MeisterAjit

你能提供你的問題中的HTML代碼嗎？這將有助於查看您正在使用的元素的結構和類型。如果真的很長，你可能不需要在表單中包含所有的輸入。 ;） – talemyn

請檢查bookmywatercan.com。我上傳了虛擬演示頁面。填寫表格並提交。謝謝你亂七八糟的時候會看到下面的內容向上移動。請幫忙。我需要有組織的形式在同一地點和container1下面的內容。 – MeisterAjit

下面的數據佈局正在向上移動設置顯示：無

回答

相關問題