使用CSS自动调整中心div的大小？

Question

调整浏览器窗口/页面的大小时，我很难让3个div自动调整大小。

我有两个固定大小的div，我希望中心div自动调整大小以填充剩余空间，并且在页面尺寸缩小时不将第三个div换行。

我将在div上设置一个min-width属性，该属性将包裹三个div，以防止中间div的宽度大约为65px时包裹第三个div。

这是否必须使用javascript完成，因为我目前正在尝试使用CSS实现此功能，但是没有运气。

javascript或css表达式将类似于width = page.width-div1.width -div3.width，但如果可能的话，我想避免使用js。

谢谢你的帮助！

麦克风

您可以在所附的图像中看到预期的行为。

1）我想要的2）我目前正在经历的收缩

我调整了div的大小，并在其中将文本框设置为100％，以使其随div调整大小。

但是，右侧div可以是如下所示的267px，也可以是192px（离散），我应该只在某些页面上的代码后面设置边距右吗？ 还是有一种方法可以根据div权利的大小使边际权利成为动态？

例如。 HTML

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
  <div id="centre">        
  <div>
</div>

CSS

#wrapper
{height:84px;
 background-image:url(../images/siteImages/header_back.png);
 background-repeat: repeat-x;}

#left
{height:inherit;
 width:512px;
 background-image:url(../images/siteImages/logo.png);
 background-repeat: no-repeat;
 float:left;}

#centre
{width:auto;
 margin-left:512px;
 margin-right:267px;
 height:inherit;}

#right
{padding-right:10px;
 height:inherit;
 float:right;
 text-align:right;}

Answer 1

您可能会喜欢：

<div id="a">...</div>
<div id="c">...</div>
<div id="b">...</div>

使用此CSS：

#a { width: 512px; float: left; }
#b { width: auto; margin-left: 512px; margin-right: 200px;}
#c { width: 200px; float: right; }

我相信它将满足您的需求。

Answer 2

你有没有尝试过：

<div id="div2" style="margin-left:auto;margin-right:auto;">content</div>

删除div2上可能有的min-width

Answer 3

只需在CSS中尝试

#centre {overflow:hidden;}

无需指定宽度，边距和高度； 。 它将自动调整。 无需更改您的HTML顺序。