如何通过左侧或右侧定位的 <div> 填充已删除的 <div> 的空间？答案

【问题标题】：How to fill the space of removed <div> by left or right positioned <div>?如何通过左侧或右侧定位的 <div> 填充已删除的 <div> 的空间？
【发布时间】：2014-05-24 07:22:28
【问题描述】：

我有 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%。我读过类似的问题，但没有成功...

【问题讨论】：

你能解释一下吗！很混乱！
更好的是，这样的 jsfiddle.net 会很棒（甚至是 ascii 艺术）。

标签： css html

【解决方案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

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

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

【讨论】：