11

我正在寻找一种方法让 CSS(3) 能够在float:leftdiv 和float:rightdiv 之间自动调整中心容器 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; }

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

4

2 回答 2

22

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

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

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

于 2012-06-01T23:48:17.560 回答
4

一个技巧是不使用浮点数，而是使用 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 也会起作用。

于 2012-06-01T23:44:30.977 回答