使用 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将阻止元素被渲染并影响布局。