我需要一个max-margin CSS属性,但它不存在 我该怎么做呢?

前端之家收集整理的这篇文章主要介绍了我需要一个max-margin CSS属性,但它不存在 我该怎么做呢?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图做一个简单的页面具有以下特点:

>其身体必须至少60em宽。
>它的左边距和右边距必须相等,宽度最大为3em。
>当调整浏览器窗口大小时,应调整文档的边距,以便浏览器窗口的水平滚动条覆盖最小的可能范围。

将这些需求转换为线性规划问题,我们得到:

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

(对不起,无聊的数学,但我不相信,英语的原始解释已经足够清楚。)

现在回到实际页面。在googling找到我可以用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不存在。我该怎么做呢?

解决方法

Spacer div在内容div的任一侧。这些是你的利润。使用max-width属性设置其最大宽度。
原文链接:https://www.f2er.com/css/222529.html

猜你在找的CSS相关文章