css - 在 2 列布局中，如果删除另一列，如何使一列扩展到总宽度？

Question

用标记更好地解释:

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>

Answer 1

纯 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(如本文其他答案所述)作为后备将是理想的选择。