使用 CSS 排列隐藏元素

Question

好的，这就是我需要的：

• 我有一个水平容器（我们称之为 C），其中包含 2 个元素 (A,B)
• 在这两个元素中，只有一个元素必须随时可见。所以，对方的visibility属性设置为hidden。
• 假设这些元素按以下确切顺序放置：|<----------- A B ->|，因此是右对齐的。
• 当元素 B 处于活动状态时，一切正常。
• 当元素 A 处于活动状态（因此 B 不可见）时，A 元素不会浮动到右侧并保持原位：|<----------- A --->|

问题：

• 如何将元素 A 向右“推”（“在”元素 B 上方），使其像向右浮动/

Answer 1

使用display:none; 而不是visibility:hidden; 因为visibility:hidden; 会隐藏元素但仍会占用空间

Answer 2

Visibility: hidden 会阻止元素被渲染，但它仍然会占用空间。

Display: none 将阻止元素被渲染并影响布局。