Html 为什么 CSS min-width 属性不强制 div 具有指定的最小宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/198153/
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
Why does the CSS min-width attribute not force a div to have the specified minimum width?
提问by Thomas Owens
<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
min-width: 50%;
}
</style>
</head>
<body>
<div>This is some text. </div>
</body>
</html>
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger. However, the border around the div stretches across the entire page width. This occurs in both IE and Firefox.
我相信 div 应该占页面的 50%，除非由于某种原因，div 内的文本使它变大。但是，div 周围的边框横跨整个页面宽度。这发生在 IE 和 Firefox 中。
Suggestions?
建议？
采纳答案by Chris Serra
If you provide absolutepositioning to the element, it will be 50%in Firefox. However, IE doesn't like the min-widthor min-heightattributes, so you will have to define width as 50%also for it to work in IE.
如果您为absolute元素提供定位，它将50%在 Firefox 中。但是，IE 不喜欢min-widthormin-height属性，因此您必须定义宽度50%才能使其在 IE 中工作。
回答by David Kolar
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger.
我相信 div 应该占页面的 50%，除非由于某种原因，div 内的文本使它变大。
min-widthdoes not set a minimum starting width from which your block will grow; rather it limits how far the block can shrink.
min-width没有设置您的块将从其增长的最小起始宽度；相反，它限制了块可以缩小的程度。
In min-width: 50%;, the 50%is in reference to the containing block. I've never used percentages with min-width, but I find it can be useful with other units. For example if I have a block (like a column of text) that I want to be full width, but I don't ever want it to go below a minimum width, I could use something like {width: 100%; min-width: 250px;}.
在 中min-width: 50%;，50%是对包含块的引用。我从未将百分比与 一起使用min-width，但我发现它与其他单位一起使用很有用。例如，如果我有一个块（如一列文本），我想要全宽，但我不希望它低于最小宽度，我可以使用类似{width: 100%; min-width: 250px;}.
Note the caveats on IE support mentioned by others.
请注意其他人提到的有关 IE 支持的注意事项。
回答by buti-oxa
Without min-width, your div will take whole page width, that is how display:blockelements behave. Adding min-widthcannot make it smaller.
没有min-width，您的 div 将占用整个页面宽度，这就是display:block元素的行为方式。添加min-width不能使它变小。
Changing displayproperty to absoluteor floatproperty to leftwill make the element to shrink to fit contents. Then, min-widthstart to make sense.
将displayproperty更改为absolute或floatproperty toleft将使元素缩小以适应内容。然后，min-width开始理解。
回答by eyelidlessness
To add to what Chris Serra said, in IE < 7 (and in 7? I can't keep track these days, but definitely < 8), widthbehaves exactly like min-widthis supposed to behave.
补充一下Chris Serra 所说的，在 IE < 7（和 7？这些天我无法跟踪，但肯定 < 8）中，width表现得与min-width应该表现的完全一样。
回答by Traingamer
You are telling it that the minimum width is 50%. Since there is nothing else taking up the space, it will take all of it (except for margins).
你告诉它最小宽度是 50%。由于没有其他东西占用空间，它将占用所有空间（边距除外）。
If you give it a max-width of say 75%, firefox should constrain it to that. IE6 will still ignore it.
如果你给它一个最大宽度，比如 75%，firefox 应该限制它。IE6 仍然会忽略它。
As David Kolar already said, many of us typically do not use percentages for min-width.
正如 David Kolar 已经说过的，我们中的许多人通常不使用最小宽度的百分比。
回答by Traingamer
You may want to try an IE specific style-sheet and include and expression like:
您可能想尝试一个特定于 IE 的样式表并包含和表达式，例如：
print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");
This will change the width setting based on the width of the browser window at load time. I personally like to use px as the unit measurement, but you need to try it with your specific setup.
这将根据加载时浏览器窗口的宽度更改宽度设置。我个人喜欢使用 px 作为单位度量，但您需要根据您的特定设置进行尝试。
