保证金CSS属性，但它不存在。我怎么能伪造它？

2018-06-27 04:38:32

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

它的身体必须至少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

（对于无聊的数学，对不起，但我不相信原始的英文解释是足够清楚的。）

现在回到实际的页面。在用Google搜索了解我能用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 divs在内容div的任一侧。那些是你的利润。使用max-width属性设置它们的最大宽度。

模仿可变宽度左边距：

.div-class {
    display: inline-block;
}
.div-class:before {
    content: '';
    width: 10%;
    min-width: 100px;
    max-width: 200px;
    display: inline-block;
}

对于任何场景下可用的纯CSS：

使用@media创建一个中断点。

使用响应宽度度量（例如em或％）并在该大小上使用静态宽度（如px）将最大宽度规则设置为低于特定大小。

你只需要做数学计算在断点的静态尺寸，以确保它的流畅度。

示例代码：

.my_class {
   margin: 0px 10%;
} 
@media screen and (min-width: 480px) {
   .my_class { 
      margin: 0px 10px;
   } 
}

这将使.my_class遵循以下.my_class ：

margin: 0px 10%; 超过480像素的屏幕宽度

margin: 0px 10px; 在480px以下。

链接地址: http://www.djcxy.com/p/76025.html

上一篇: margin CSS property, but it doesn't exist. How could I fake it?

下一篇: How can I center my two blue boxes here?

保证金CSS属性，但它不存在。 我怎么能伪造它？

保证金CSS属性，但它不存在。我怎么能伪造它？