Css HTML：div大小？

我有3个

div

s，都包含在父级中，它们都在parent-div中。
这是我的HTML：

<div id="header">
   <div id="left"></div>
   <div id="middle"></div>
   <div id="right"></div>
</div>

我希望

#左

和

#右

div具有静态大小和不重复的背景。但是，

#middle

div应该根据页面大小调整大小。如何编写CSS，使

#middle

div除了其他两个div的宽度外，还可以动态地改变其宽度？

我认为：

#left
{
   float: left;
   width: 334px;
   background-image: ...;
}
#middle
{
   margin-left: 334px;
   margin-right: 280px;
   background-image: ...;
}
#right
{
   float: right;
   width: 280px;
   background-image: ...;
}

然后您需要稍微更改div的顺序：

<div id="header">
   <div id="left"></div>
   <div id="right"></div>
   <div id="middle"></div>
</div>

---

类似的方法似乎有效

#left
{
   position:absolute;
   top:0;
   left:0;
   width: 334px;
   border:solid 1px red;
}
#middle
{
   position:absolute;
   top:0;
   left:339px;
   right:285px;
   border:solid 1px green;
}
#right
{
   position:absolute;
   top:0;
   right:0;
   width: 280px;
   border:solid 1px blue;
}

此外，如果使父div具有position:relative；这三个div将绝对位于该父级中

但是中间应该根据窗口/页面大小调整大小

不幸的是，在CSS中无法表达您想要的计算（

width:100%-614px

）。因此，您必须将宽度默认为“auto”，这意味着“100%减去任何边距、填充和边框”，然后在与左右元素大小相同的中间元素上使用边距或填充

Mark B提出了一种使用浮动的方法；您还可以通过相对定位父元素和绝对定位左、右子元素来实现这一点，其优点是不需要对元素重新排序

您还应该能够按照John的建议，通过其

left

和

right

属性对中间元素进行绝对定位，但这种“边缘定位”技术在IE6中不起作用，因此中间元素必须具有与浮点示例相同的边距

如果只是尝试在元素的左右两侧放置边框图像，则可以使用嵌套的背景图像更轻松地执行此操作：

<div id="header"><div class="left"><div class="right">
    content...
</div></div></div>

<style type="text/css">
    #header { background: url(/img/header-background.gif); }
    #header .left { background: url(/img/header-left.gif) top left repeat-y; }
    #header .right { background: url(/img/header-right.gif) top right repeat-y; }
    #header .right { padding: 0 280px 0 334px; }
</style>

所容纳之物
#标题{background:url（/img/header-background.gif）；}
#header.left{background:url（/img/header left.gif）左上角repeat-y；}
#header.right{background:url（/img/header right.gif）右上角repeat-y；}
#header.right{padding:0280px 0 334px；}

<div id="header"><div class="left"><div class="right">
    content...
</div></div></div>

<style type="text/css">
    #header { background: url(/img/header-background.gif); }
    #header .left { background: url(/img/header-left.gif) top left repeat-y; }
    #header .right { background: url(/img/header-right.gif) top right repeat-y; }
    #header .right { padding: 0 280px 0 334px; }
</style>