containers - float :left & float:right divs 之间的 CSS 自动调整容器

Question

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

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

这是一个活跃的工作模型: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。