HTML：div大小？

Question

我有3 div s，全部包含在父母中他们在父母div中。
这里是我的HTML：

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

我的CSS：

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

我想#left和#right的div具有静态尺寸和不重复的背景。但是，#middle div应根据页面大小调整大小。我如何写我的CSS，以便#middle div动态改变它，除了其他两个div的宽度？

Answer 1

我想：

#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> 

Answer 2

这样的事情似乎工作

#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有位置：亲戚;这三个div将完全置于该父母之中。

Answer 3

但中间应该调整由于窗口/页面大小！

不幸的是，没有办法在CSS中表达你想要的计算（width: 100%-614px）。所以你必须让宽度默认为'auto'，这意味着'100％减去任何边距，填充和边框'，然后在左侧和右侧元素大小相同的中间元素上使用边距或填充。

马克B建议使用浮动的方法之一;您还可以通过相对定位父级和绝对定位左侧子元素和右侧子元素来完成此任务，其优点是不需要重新排序元素。

您应该进一步能够绝对位置由其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>