0

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

<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;}

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

是否可以仅使用 CSS 而无需 Javascript来做到这一点？

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

4

2 回答 2

4

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

<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 不存在的情况。如果您想查看一个元素是否为空（或非空），您需要使用与: :empty链接的伪类（这可能不是确切的语法）。:not#column2:not(:empty)

编辑：其他选项可以包括查看#column1 是唯一的孩子（#column1:only-child）还是第一个/最后一个孩子，而它应该是最后一个/第一个孩子（#column1:first-child/ #column1:last-child）。

于 2012-11-13T13:00:14.797 回答
0

如果未定义，Div 将始终回退到 100% 宽度。所以我会设置如下：

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

您必须确保<div id="column2">..</div>在不需要时不存在。

于 2012-11-13T12:38:01.600 回答