使用 CSS 排列隱藏元素

Question

好的，這就是我需要的：

• 我有一個水平容器（我們稱之為 C），包含 2 個元素 (A,B)
• 在這兩個元素中，只有一個必須隨時可見。 因此，另一個的visibility屬性設置為hidden 。
• 假設這些元素按以下確切順序放置： |<----------- AB ->| ，因此右對齊。
• 當元素 B 處於活動狀態時，一切正常。
• 當元素 A 處於活動狀態（因此 B 不可見）時，A 元素不會浮動到右側並保持原位： |<----------- A --->|

問題：

• 如何將元素 A 向右“推”（“上方”元素 B），使其就像向右浮動/

Answer 1

使用display:none; 而不是visibility:hidden; 作為visibility:hidden; 將隱藏元素但仍占據空間

Answer 2

Visibility: hidden將阻止元素被渲染，但它仍然會占用空間。

Display: none將阻止元素被渲染並影響布局。