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

Question

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

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

CSS:

#box { width: 20em; }
#column1 {width: 12em;}
#column2 {float: left; width: 8em;}

如果 column2 为空或不存在，我希望将 column1 扩展为“100%”。

是否可以仅使用 CSS 而不使用 Javascript？

编辑:更改#column1 宽度。示例有错误，在顶部添加了 div。

Answer 1

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

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

#column2 + #column1 { width: 10em }

如果它们必须按照您指定的顺序排列，那么使用表格显示属性就可以做到(当#column2 较短时，#column1 不会绕过#column2):

#box { width: 20em; display: table }
#column1, #column2 { display: table-cell }
#column2 { width: 8em; } /* you'll want to add some margin/padding here */

请注意，这些解决方案仅适用于 #column2 不存在的情况。如果您想查看一个元素是否为空(或不为空)，您需要使用与 :not 链接的 :empty 伪类:# column2:not(:empty)(这可能不是准确的语法)。

编辑:其他选项可以包括查看#column1 是独生子 (#column1:only-child) 还是第一个/最后一个 child ，而它应该是最后一个/第一个 child (#column1:first-child/#column1:last-child).