我有一个简单的两列布局,宽度固定。
<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
扩展到&#34; 100%&#34;如果column2
为空或不存在。
是否可以使用CSS 而不使用Javascript ?
编辑:更改了#column1的宽度。示例有一个错误,添加div ontop。
答案 0 :(得分: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
/ {{1 }})。
答案 1 :(得分:0)
如果没有定义,Div将总是回落到100%宽度。所以我将其设置如下:
#box { width: 20em; }
#column1 {width: auto;}
#column2 {float: left; width: 8em; margin-left: 2em; }
您必须确保<div id="column2">..</div>
不存在,但不必要。