Html 如何使用最小宽度、最大宽度和宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15409091/
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
how to use min-width, max-width and width 100%
提问by Bhojendra Rauniyar
Anybody please help me describing a suitable example of min-width max-width and width 100% and why should I use this specially for?
任何人都请帮我描述一个合适的最小宽度最大宽度和宽度 100% 的例子，为什么我应该专门使用它？
Edit
编辑
what should I use for min-width that most computers resolution may match. what should I use for max-width that most computers resolution may match.
对于大多数计算机分辨率可能匹配的最小宽度，我应该使用什么。对于大多数计算机分辨率可能匹配的最大宽度，我应该使用什么。
EditI need better example as yahoo.com use
编辑我需要更好的例子作为 yahoo.com 使用
回答by Gaurav Pandey
min-width:If you set it 50px, then by default your div will be of width 50px. If the content inside the div has more width than 50px, then it(your div with min-width) will expand.
min-width：如果你将它设置为 50px，那么默认情况下你的 div 将是 50px 的宽度。如果 div 内的内容宽度大于 50px，则它（您的 div 的 min-width）将扩展。
max-width:If you set it 50px and if the content inside the div has more width than 50px, then it(your div with max-width) will not expand, a horizontal scroll may appear depending on your overflow settings.
max-width：如果设置为 50px 并且 div 内的内容宽度大于 50px，则它（您的具有 max-width 的 div）不会扩展，根据您的溢出设置可能会出现水平滚动。
width:100%By default divs are of width 100% but if you have floating divs and you want to them to take all the horizontal space of their container, width:100% does help there.
width:100%默认情况下 div 的宽度为 100% 但如果你有浮动 div 并且你想让它们占据容器的所有水平空间，width:100% 确实有帮助。
回答by Kamil
it's very general, but:
这是非常普遍的，但是：
min-widthis very useful in cases in which you have width set in % and you don't want to your element be too small.
<div style="100%"> <div style="width:30%;min-width:50px;"></div> </div>
min-width在宽度设置为 % 并且不希望元素太小的情况下非常有用。
<div style="100%"> <div style="width:30%;min-width:50px;"></div> </div>
So if parent div will be to small, child will have at least 50px.
因此，如果父 div 很小，则子级将至少有 50px。
Or you can use it if div is dependent of parent window width. Min-width has higher priority than width and max-width.
或者，如果 div 依赖于父窗口宽度，则可以使用它。min-width 的优先级高于 width 和 max-width。
max-widthcan be used in similar way.
width:100%is explained in details here: http://www.impressivewebs.com/width-100-percent-css/
max-width可以以类似的方式使用。
宽度：100%在这里详细解释：http: //www.impressivewebs.com/width-100-percent-css/
回答by Sven van den Boogaart
min-width:
最小宽度：
the minimum width of the div, it will never be smaller as the width given.
div 的最小宽度，它永远不会比给定的宽度更小。
if min-width:50px the div will always be minimum 50 px or bigger.
如果 min-width:50px div 总是最小 50 px 或更大。
if min-width:50% the div will be 50% of the object its in.
如果 min-width:50% div 将是其所在对象的 50%。
( if its in a div of 1200px it will be 600px)
（如果它在 1200 像素的 div 中，它将是 600 像素）
( if the first div it will be 50% of the screen)
（如果第一个 div 将是屏幕的 50%）
max-width
最大宽度
is the same as minimum but now it will never be bigger instead of never smaller. so if:
与最小值相同，但现在它永远不会变大而不是永远不会变小。因此，如果：
max-width:50%
最大宽度：50%
the div wil never be bigger then 50% of the object its in.
div 永远不会大于其所在对象的 50%。
if you use % if you want the page to look exactly the same on each resolution.
如果您希望页面在每个分辨率下看起来完全相同，则使用 % 。
if you have 1 div with width 80%
如果你有 1 个宽度为 80% 的 div
<div id="1">
and 1 div in it with width 50%
和其中的 1 个 div，宽度为 50%
<div id="2">
div 2 will be 50% of 80 % so it will be 40% of the total page.
div 2 将是 80% 的 50%，因此它将是总页面的 40%。
min-width and max width can be used if you have a div with no width:
如果您有一个没有宽度的 div，则可以使用 min-width 和 max width：
the div will be betweeen the min-width and max-width then, depending on the content.
div 将在 min-width 和 max-width 之间，具体取决于内容。
if you use width:100% it makes the div 100% the width of the object its in.
如果您使用 width:100% 它会使 div 100% 的对象的宽度。
if its the first div its the full width of the screen.
如果它的第一个 div 是屏幕的整个宽度。
if it is in a div with width:500px the div will be 100% of 500 px so 500px
如果它在宽度为 500px 的 div 中，则 div 将是 500 px 的 100% 所以 500px
回答by Sowmya
min-widthis used to fix the minimum width, after the given extent of the width value, div will start expanding automatically
min-width用于固定最小宽度，在给定宽度值的范围后，div将开始自动扩展
max-widthis used to give maximum width after that extent div will not get extends.
max-width用于在该范围 div 不会得到扩展之后提供最大宽度。
width:100%extends the div to the available space of the browser/parent element
width:100%将 div 扩展到浏览器/父元素的可用空间
