float:left 和 float:right div 之间的 CSS 自动调整容器

Question

我正在寻找一种方法让 CSS(3) 能够在 float:left div 和 float:right div 之间自动调整中心容器 div 的宽度。

中心 div 还需要能够设置 min-width，类似于 google+ -> home，其中中心内容自动安装在左侧导航按钮和右侧聊天窗格之间。然后，当屏幕宽度缩小到某个点（使用 javascript 检测到）时，聊天窗格会最小化以节省空间。

这里有一个活跃的模型来制作：http://jsfiddle.net/9vrby/

另外，这是我现在使用的 css 代码：

#left{ float:left; width:200px; height:400px; border:1px solid #000; }

#center{ float:left; width:auto; height:400px; border:1px solid red; }

#right{ float:right; width:100px; height:400px; border:1px solid blue; }

如果您需要更多信息，请告诉我，并提前感谢您的帮助。

Answer 1

在#center 上，删除float: left 并添加overflow: hidden。此外，#center 需要在 HTML 中移到最后。

http://jsfiddle.net/thirtydot/9vrby/14/

这适用于所有现代浏览器，甚至 IE7。

Answer 2

一个技巧是不使用浮点数，而是使用 display:table-cell。

http://jsfiddle.net/9vrby/8/

HTML：

<div id='left'></div>
<div id='center'></div>
<div id='right'></div>

CSS：

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; }
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; }
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; }

但请注意，此方法在 IE7（及更低版本，但谁仍然支持这种废话吗？）中不起作用。但也许您可以查看CSS3Pie，它使您能够将 CSS(3) 用于官方不支持它的浏览器，例如 IE7。所以也许 display:table-cell 也可以。