css - 我需要一个 max-margin CSS 属性，但它不存在。我怎么能伪造它？

Question

我正在尝试制作一个具有以下特征的简单页面:

1. 它的主体必须至少有 60em 宽。
2. 它的左右边距必须等宽，并且最多 3em 宽。
3. 调整浏览器窗口大小时，应调整文档边距的大小，以便浏览器窗口的水平滚动条覆盖尽可能小的范围。

将这些需求转化为一个线性规划问题，我们得到:

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 */

求解这个线性规划，我们得到:

BODY = (BRWS <= 66) ? 60 : (BRWS - 6)
HSCR = (BRWS >= 60) ?  0 : (60 - BRWS)
LRMG = (BRWS + HSCR - BODY) / 2

(对不起，无聊的数学，但我不确定英文的原始解释是否足够清楚。)

---

现在回到实际页面。在谷歌搜索找到我可以用 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. */
}

如果 CSS 有一个 max-margin 属性，那么满足所有要求会很容易:

body > div {
  max-margin: 0 3em;
  max-width: 100%;
}

但是，当然，max-margin 不存在。我怎么能伪造它？

Answer 1

内容 div 两侧的间隔 div。那是你的利润。使用 max-width 属性设置它们的最大宽度。