HTML：div 大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1488318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: div size?
提问by Max Frai
I have 3 divs, all contained within a parent They are in parent-div.
Here's my HTML:
我有 3 个div，都包含在一个父级中，它们在父级 div 中。
这是我的 HTML：
<div id="header">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
And my CSS:
还有我的 CSS：
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
float: left;
width: ???;
background-image: ...;
}
#right
{
float: left;
width: 280px;
background-image: ...;
}
I want the #leftand #rightdivs to have static sizes and non-repeating backgrounds. However, the #middlediv should resize depending on the page size. How can I write my CSS so that the #middlediv changes its with dynamically, apart from the width of the other two divs?
我希望#left和#rightdiv 具有静态大小和非重复背景。但是，#middlediv 应该根据页面大小调整大小。#middle除了其他两个 div 的宽度之外，如何编写 CSS 以便div 动态更改其宽度？
回答by Mark Bell
I think:
我认为：
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
margin-left: 334px;
margin-right: 280px;
background-image: ...;
}
#right
{
float: right;
width: 280px;
background-image: ...;
}
and then you will need to change the order of the DIVs slightly:
然后您需要稍微更改 DIV 的顺序：
<div id="header">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
回答by bobince
But middle should resize due to window/page size!
但是由于窗口/页面大小，中间应该调整大小！
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto', which means ‘100% minus any margins, paddings and border', and then use margins or padding on the middle element of the same size as the left and right elements.
不幸的是，没有办法width: 100%-614px在 CSS 中表达你想要的计算 ( )。因此，您必须让宽度默认为“自动”，即“100% 减去任何边距、填充和边框”，然后在与左右元素大小相同的中间元素上使用边距或填充。
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
Mark B 提出了一种使用浮动的方法；您也可以通过相对定位父元素并绝对定位左右子元素来实现，这样做的优点是不需要重新排序元素。
You shouldbe further able to absolute-position the middle element by its leftand rightproperties as suggested by John, but this ‘edge-positioning' technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
您应该能够进一步按照 John 的建议通过中间元素left和right属性对中间元素进行绝对定位，但是这种“边缘定位”技术在 IE6 中不起作用，因此中间元素必须具有与原来相同的边距浮动示例。
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
如果您只是想在元素的左侧和右侧放置边框图像，则可以使用嵌套背景图像更轻松地做到这一点：
<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>
回答by John Boker
something like this seems to work
这样的事情似乎有效
#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;
}
also, if you made the parent div have position:relative; these three divs would be positioned absolutely within that parent.
另外，如果你让父 div 有 position:relative; 这三个 div 将绝对定位在该父级中。
