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

时间:2012-11-13 12:35:36

标签: html css layout

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

<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。

2 个答案:

答案 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>不存在,但不必要。