css - 如何用左定位或右定位的<div>填充被移除的<div>的空间？

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%，它会填满主体的整个宽度。当我删除左侧面板时，如何设置内容以从右侧面板旁边填充到 body 的左边框？ 例如，当我想从 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

将左侧 Pane 移开，看看会发生什么:内容将填满剩余的宽度。

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