css - 如何填充已删除的空间按左或右定位?

Question

我有 3 列并排放置.. 左侧一列作为左侧模块面板，一列在中心作为内容列，右侧一列作为右侧模块面板。

CSS：

#left{
    width: 20%;
    float: left;
}

#right{
    width: 25%;
    float: right;
}

#content{
    width: 55%;
    float: right;
}

HTML

<div id="right">
   some module
</div>
<div id="content">
   some content
</div>
<div id="left">
   some module
</div>

现在：当我删除 id='left' 的 div 时，内容 div 保留其 55% 的位置，如果我删除删除 55%，它会填充整个身体宽度。当我删除左面板时，如何设置内容以从右面板旁边填充到正文的左边框？例如，当我想从 html 代码中删除左侧面板时，我不喜欢将内容从 55% 更改为 75%。我喜欢它自动扩展到所有剩余的 75%。我读了类似的问题，但没有成功...

Answer 1

这个解决方案如何，使用overflow:hidden：

HTML

<div id="right">
    some module
</div>
<div id="left">
    some module
</div>
<div id="content">
    some content
</div>

CSS

#left{float:left; width:20%}
#right{float:right; width:25%}
#content{overflow:hidden;}

JSFiddle

拿走左窗格，看看会发生什么：内容将填满剩余的宽度。

我添加了一些背景颜色，只是为了让它更清晰一点。