我试图做一个简单的页面具有以下特点:
>其身体必须至少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属性设置其最大宽度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。