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

将左侧窗格移开，看看会发生什么：内容将填充剩余的宽度。

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

如何通过向左或向右定位<div>？</div> </div>来填充已删除<div>的空间

1 个答案: