Html 带百分比的 CSS 最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1517469/
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
CSS max-width with percent
提问by Jay
max-width with a percent doesn't seem to work in either IE 8 or Firefox 3. Specific pixel widths work fine. Am I missing something?
带有百分比的 max-width 似乎在 IE 8 或 Firefox 3 中都不起作用。特定的像素宽度工作正常。我错过了什么吗？
I have an input form, and I want to display some explanatory text to the right of it. But I don't want the explanatory text to squash the form.
我有一个输入表单，我想在它的右侧显示一些解释性文本。但我不希望解释性文字压扁表格。
I haven't used max-width before but it seemed an excellent solution. I wrote this simple CSS style:
我以前没有使用过 max-width 但它似乎是一个很好的解决方案。我写了这个简单的 CSS 样式：
div.hint {max-width: 50%; float: right;}
Then I wrote:
然后我写道：
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...
The div.hint squashes the form severely to the left.
div.hint 将表单严重向左挤压。
I tried this with just some text instead of the form. The div.hint takes about 95% of the screen, just gives a small margin on the left, and then the other text is pushed completely below it.
我只用一些文本而不是表单来尝试这个。div.hint 大约占屏幕的 95%，只在左边留出一小块空白，然后将其他文本完全推到其下方。
If I change the max-width from a percent to a fixed number of pixels, it appears to work. But I don't want to base it on pixels because I don't know the dimensions of the user's browser.
如果我将最大宽度从百分比更改为固定数量的像素，它似乎可以工作。但我不想基于像素，因为我不知道用户浏览器的尺寸。
Does percent not work with max-width despite what I read in documentation, or am I missing something?
尽管我在文档中读到了什么，百分比还是不能与 max-width 一起使用，还是我遗漏了什么？
In response to Seanmonster's comment: Here, I'll give a trivial but complete web page that illustrates what I thought should work but doesn't:
针对 Seanmonster 的评论：在这里，我将给出一个简单但完整的网页，说明我认为应该有效但无效的内容：
<html><title>Max width test</title>
<style>
.form {max-width: 75%; float: left;}
.hint {max-width: 50%; float: right;}
</style>
<div class=hint>
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
</div>
<div class=form>
<table>
<tr><th>Label 1 <td>Value 1
<tr><th>Label 2 <td>Value 2
<tr><th>Label 3 <td>Value 3
</table>
</div>
</html>
When I open this page in a browser, I get, not two columns, but the "hint" div taking 100% of the width, and below that the "form" div taking 100% of the width. If I change both the max-width's to "width: 50%", I get two columns as I would expect. Apparently I'm missing something about how max-width is supposed to work, but ... I don't get it.
当我在浏览器中打开此页面时，我得到的不是两列，而是占宽度 100% 的“提示”div，在其下方是占宽度 100% 的“表单”div。如果我将两个最大宽度都更改为“宽度：50%”，我会得到两列，正如我所期望的。显然我遗漏了一些关于 max-width 应该如何工作的信息，但是......我不明白。
采纳答案by diadem
max-width on IE8 is buggy under multiple scenarios. It is a known issue.
IE8 上的 max-width 在多种情况下都有问题。这是一个已知问题。
You can find an article on it here. http://edskes.net/ie8overflowandexpandingboxbugs.htm
你可以在这里找到一篇关于它的文章。http://edskes.net/ie8overflowandexpandingboxbugs.htm
You need three things to trigger this bug - maxwidth, scrollbars, and float
您需要三件事来触发此错误 - maxwidth、scrollbars 和 float
回答by seanmonstar
Max-width works perfectly fine in FF3 and IE8 with percentages. Percentages, however, are based off the parent width. Not children around it.
Max-width 在 FF3 和 IE8 中使用百分比效果很好。但是，百分比基于父宽度。不是周围的孩子。
回答by CMN
If you were to float the div.hint and form both to the left and have them both with a max-width of 50%, they shouldn't squish each other.
如果您要浮动 div.hint 并将两者都向左形成并且使它们的最大宽度为 50%，则它们不应该相互挤压。
<div>
<div class="form" style="float:left; max-width:50%">
<form></form>
</div>
<div class="hint" style="float:left; max-width:50%">
</div>
</div>
