我需要一个 max-margin CSS 属性，但它不存在。我怎么能假装呢？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6285279/
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
I need a max-margin CSS property, but it doesn't exist. How could I fake it?
提问by pyon
I am trying to make a simple page with the following characteristics:
我正在尝试制作一个具有以下特征的简单页面：
- Its body must be at least 60em wide.
- Its left and right margins must be equally wide and at most 3em wide.
- When the browser window is resized, the document's margins should be resized so that the browser window's horizontal scrollbar covers the least wide possible range.
- 它的身体必须至少有 60em 宽。
- 它的左右边距必须等宽，最多 3em 宽。
- 调整浏览器窗口大小时，应调整文档的边距大小，以便浏览器窗口的水平滚动条覆盖尽可能小的范围。
Transforming these requirements into a linear programming problem, we get:
将这些要求转化为线性规划问题，我们得到：
DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document's body)
LRMG = (width of the document's left and right margins)
HSCR = (range of the browser window's horizontal scroll bar)
OBJECTIVE:
MIN HSCR /* Third requirement */
CONSTRAINTS:
HSCR = BODY + 2*LRMG - BRWS /* From the definition of how a browser's
* horizontal scrollbar works. */
BODY >= 60 /* First requirement */
LRMG <= 3 /* Second requirement */
LRMG >= 0 /* Physical constraint, margins cannot be negative */
HSCR >= 0 /* Physical constraint, scroll bars cannot have negative ranges */
Solving this linear program, we get:
求解这个线性规划，我们得到：
BODY = (BRWS <= 66) ? 60 : (BRWS - 6)
HSCR = (BRWS >= 60) ? 0 : (60 - BRWS)
LRMG = (BRWS + HSCR - BODY) / 2
(Sorry for the boring math, but I am not confident that the original explanation in English was clear enough.)
（抱歉数学很无聊，但我不相信英文原文的解释是否足够清楚。）
Now back to the actual page. After googling to find what I could do with CSS, I managed to implement the first two requirements using the following code:
现在回到实际页面。在谷歌上搜索我可以用 CSS 做什么之后，我设法使用以下代码实现了前两个要求：
body {
min-width: 60em; /* First requirement */
}
/* The document's body has only two children, both of which are divs. */
body > div {
margin: 0 3em; /* Second requirement, but in a way that makes */
max-width: 100%; /* it impossible to satisfy the third one. */
}
If CSS had a max-marginproperty, satisfying all requirements would be easy:
如果 CSS 有一个max-margin属性，那么满足所有要求就很容易了：
body > div {
max-margin: 0 3em;
max-width: 100%;
}
But, of course, max-margindoes not exist. How could I fake it?
但是，当然，max-margin不存在。我怎么能假装呢？
采纳答案by Matthew
Spacer divs on either side of the content divs. Those are your margins. Set their max width using the max-width property.
内容 div 两侧的间隔 div。这些是你的利润。使用 max-width 属性设置它们的最大宽度。
回答by Jonathan Lin
To mimic a variable-width left margin:
模仿可变宽度的左边距：
.div-class {
display: inline-block;
}
.div-class:before {
content: '';
width: 10%;
min-width: 100px;
max-width: 200px;
display: inline-block;
}
回答by nosajimiki
For pure CSS that works in any scenario:
对于适用于任何场景的纯 CSS：
- use @mediato create a break point.
- Set a max-widthrule below a certain size using responsive width measurements such as an emor %and over that size use static widths such as px.
- 使用@media创建断点。
- 使用响应宽度测量（例如em或% ）将最大宽度规则设置为低于特定大小，超过该大小使用静态宽度（例如px ）。
You'll just need to do the math to figure out the static sizes at the break point to make sure it scales fluidly.
您只需要进行数学计算即可找出断点处的静态大小，以确保它可以流畅地缩放。
Sample Code:
示例代码：
.my_class {
margin: 0px 10%;
}
@media screen and (min-width: 480px) {
.my_class {
margin: 0px 10px;
}
}
This will make .my_classfollow both:
这将使.my_class遵循两个：
- The
margin: 0px 10%;at over a screen width of 480px - The
margin: 0px 10px;at under 480px.
- 该
margin: 0px 10%;超过的屏幕宽度480像素 - 该
margin: 0px 10px;下在480像素。
回答by Jordan
Matthew's answer is the correct one here, but to expand on what he's saying:
马修的答案在这里是正确的，但要扩展他的意思：
<div id="left"></div>
<div id="content">Content goes here</div>
<div id="right"></div>
<!-- probably need a cleanup div to fix floats here -->
CSS:
CSS：
#left, #right {
float: left;
max-width: 3em;
}
#content {
min-width: 60em;
}
回答by Onur Y?ld?r?m
None of the answers worked for me 100%.
没有一个答案对我 100% 有效。
Best way is to use CSS tableand table-cell. Supported by all browsers (even IE 8). This handles wrapping way better than floator inline-blocksolutions, when the page is too narrow.
最好的方法是使用CSStable和table-cell. 支持所有浏览器（甚至 IE 8）。当页面太窄时，这比float或inline-block解决方案更好地处理换行。
CSS
CSS
.wrapper {
display: table;
position: relative;
width: 100%;
}
.wrapper:before {
content: '';
display: table-cell;
min-width: 100px;
width: 25%;
max-width: 300px;
}
.wrapper > .content {
display: table-cell;
width: 100%;
}
HTML
HTML
<div class="wrapper>
<div class="content>
<!-- content here -->
</div>
</div>
回答by Erikai
body {
margin-left: auto;
margin-right: auto;
width: 60em;
}
回答by PalDev
Spacer divs are bad practice. Setup another DIV on top of your DIV on your template with text-align:right(if you want to maximize the margin-left) or text-align:leftif you want to maximize the margin-right, this will do the job.
间隔 div 是不好的做法。在模板上的 DIV 顶部设置另一个 DIV text-align:right（如果您想最大化左边距）或者 text-align:left如果您想最大化右边距，这将完成工作。
回答by Emil
Re-size the window to observe the changes to the ui.
重新调整窗口大小以观察 ui 的变化。
The website uses min-width max-width with width:100%
网站使用 min-width max-width 和 width:100%
The black frame has max-width which is little wider then the container.
黑框的最大宽度比容器稍宽。
