Question

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

中心div还需要具有min-width设置的功能，类似于Google + - ＆gt;在左侧导航按钮和右侧聊天窗格之间自动安装中心内容的主页。然后，当屏幕宽度缩小超过某个点（使用javascript检测）时，聊天窗格最小化以节省空间。

此外，这是我现在使用的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

一个技巧是不使用浮点数，而是显示：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。所以也许显示：table-cell也会起作用。

float：left＆amp;之间的CSS自动适合容器float：正确的div

2 个答案: