Html 使用CSS在两列和一列布局之间自动切换

我有一个简单的固定宽度的两列布局

<div id='box'>
    <div id='ontop'>Ontop</div>
    <div id='column1'>Column1</div>
    <div id='column2'>Column1</div>
</div>

如果

column2

为空或不存在，我希望将

column1

扩展到“100%”

仅使用CSS而不使用Javascript是否可以做到这一点

---

编辑：更改了#列1的宽度。示例有一个错误，添加了div-ontop。

如果未定义，div的宽度将始终回落到100%。因此，我将其设置如下：

#box { width: 20em; }
#column1 {width: auto;}
#column2 {float: left; width: 8em; margin-left: 2em; }

---

您必须确保

。

不存在，但在不必要的情况下。

如果未定义，Div将始终返回到100%宽度。因此，我将其设置如下：

#box { width: 20em; }
#column1 {width: auto;}
#column2 {float: left; width: 8em; margin-left: 2em; }

---

您必须确保

。

不存在，尽管它不是必需的。

如果元素的顺序相反，这实际上更容易

<div id='box'>
    <div id='column2'></div>
    <div id='column1'></div>
</div>

#column2 + #column1 { width: 10em }

请注意，这些解决方案仅适用于#column2不存在的情况。如果要查看元素是否为空（或不为空），则需要使用与

:not

：

#column2:not（：empty）

链接的

:empty

伪类（这可能不是确切的语法）

---

编辑：其他选项可以包括查看#column1是独生子女（

#column1:独生子女

）还是第一个/最后一个孩子（当它应该是最后一个/第一个孩子时）（

#column1:第一个孩子

/

#column1:最后一个孩子

）。

如果元素的顺序相反，这实际上更容易

<div id='box'>
    <div id='column2'></div>
    <div id='column1'></div>
</div>

#column2 + #column1 { width: 10em }

请注意，这些解决方案仅适用于#column2不存在的情况。如果要查看元素是否为空（或不为空），则需要使用与

:not

：

#column2:not（：empty）

链接的

:empty

伪类（这可能不是确切的语法）

---

编辑：其他选项可以包括查看#column1是独生子女（

#column1:独生子女

）还是第一个/最后一个孩子（当它应该是最后一个/第一个孩子时（

#column1:第一个孩子

/

#column1:最后一个孩子

）。

您需要检查第二列是否存在。您可以通过JS来实现，但也可以在模板中实现，并将相应的CSS类（例如“layout two col”）写入

BODY

标记。看看Wordpress的默认主题，它们是这样构建的。在什么情况下，

column2

会是空的？你需要检查第二列是否存在。您可以通过JS来实现，但也可以在模板中实现，并将相应的CSS类（例如“layout two col”）写入

BODY

标记。看看Wordpress的默认主题，它们是这样构建的。在什么情况下，

column2

会是空的？如果#column2比#column1短，那么#column1将围绕#column2流动。大多数情况下，您不希望在两列布局中出现这种情况。如果我将#column1的宽度设置为自动，并且第一列的内容是一个短句子，那么#column1将只扩展到句子的宽度，而不是100%。尝试将最小宽度：10em添加到column1，如果#column2比#column1短，则#column1将在#column2周围流动。大多数情况下，您不希望在两列布局中出现这种行为。如果我将#column1的宽度设置为“自动”，并且第一列的内容是一个短句子，那么#column1只会扩展到句子的宽度，不到100%。请尝试将最小宽度：10em添加到第1列，为什么它们必须按相反的顺序？选择器只能在一个方向上工作。您可以选择在特定元素之后的元素，但不能选择在特定元素之前的元素。我得到的结果与将column1设置为“自动宽度”相同。如果column1的内容很少，div将不会扩展到所有可用空间（100%的#box）。@boasdescriptor您使用的是哪种解决方案？我无法复制：--如果我删除div#column2，div#column1将占据整个div#box的宽度。为什么它们必须按相反的顺序排列？

+

选择器只在一个方向工作。您可以选择在特定元素之后的元素，但不能选择在特定元素之前的元素。我得到的结果与将column1设置为“自动宽度”相同。如果column1的内容很少，div将不会扩展到所有可用空间（100%的#box）。@BoasDescriptor您使用的是哪种解决方案？我无法复制：--如果我删除div#column2，div#column1将占据整个div#box的宽度。