用标记更好地解释:
HTML:
<div><!--both sidebar and content share width-->
<div id="content"><!--maybe at 30%-->
</div>
<div id="sidebar"><!--may be at 70%-->
</div>
</div>
CSS:
#sidebar{float:left;} /* no idea what width*/
#content{float:right;} /* no idea what width*/
我想做的是,如果边栏不在标记中,内容 div 将扩展以取代边栏:
<div>
<div id="content"><!--width now at 100%-->
</div>
</div>
最佳答案
纯 CSS 方法将使用 CSS 表格布局:
CSS:
#wrapper{
display: table;
width: 100%;
}
#content {
display: table-cell;
width: auto;
}
#sidebar {
display: table-cell;
width: 30%;
}
HTML:
<div id="wrapper"><!--both sidebar and content share width-->
<div id="content"><!--maybe at 30%-->content
</div>
<div id="sidebar"><!--may be at 70%-->sidebar
</div>
</div>
但是,以上内容不适用于 IE6/7 等较旧的浏览器。使用 javascript(如本文其他答案所述)作为后备将是理想的选择。
关于css - 在 2 列布局中,如果删除另一列,如何使一列扩展到总宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2189127/