我需要一个最大边距的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属性设置其最大宽度.

Answer 2

要模仿可变宽度的左边距:

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

Answer 3

对于适用于任何场景的纯CSS:

1. 使用@media创建一个断点.
2. 使用响应宽度测量(例如em或%)将最大宽度规则设置为低于特定大小,并使用静态宽度(例如px).

您只需要进行数学运算即可确定断点处的静态尺寸,以确保其流畅地伸缩.

示例代码:

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

这将.my_class遵循两者:

• 该margin: 0px 10%;超过的屏幕宽度480像素
• 该margin: 0px 10px;下在480像素.

Answer 4

对于 2021 年阅读这篇文章的人。我想向您指出这篇文章中给出的答案：我们可以在 css 中定义 min-margin 和 max-margin、max-padding 和 min-padding 吗？。

TLDR：使用 css 数学函数min

Answer 5

马修的回答是正确的,但要扩展他所说的话:

<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:

#left, #right {
    float: left;
    max-width: 3em;
}

#content {
    min-width: 60em;
}

Answer 6

就这么简单

margin-left: min(30%, 150px);
margin-right: min(30%, 150px);

margin-left: min(30%, 150px);
margin-right: min(30%, 150px);

.margin-flat {
  margin-left: 150px;
  margin-right: 150px;
  background: #F6D55C;
}

.margin-max {
  margin-left: min(30%, 150px);
  margin-right: min(30%, 150px);
  background: #3CAEA3;
}

.margin-variable {
  margin-left: 30%;
  margin-right: 30%;
  background: #ED553B;
}

.inner {
  height: 100%;
}

.outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}