我有一个固定宽度的简单两列布局。
<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。
最佳答案
如果元素的顺序相反,这实际上会更容易。
<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
).
关于html - 使用CSS在两列和一列布局之间自动切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13360890/