我需要一个最大边距CSS属性，但它没有'；不存在。我怎么能假装呢？

我试图制作一个具有以下特征的简单页面：

它的身体必须至少有60公分宽

其左右边距必须相等宽，且最大宽度为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

如果CSS具有

max margin

属性，那么满足所有要求将很容易：

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

---

但是，当然，

max margin

不存在。我怎么能伪造它呢？

内容div两边的间隔div。这些是你的利润。使用“最大宽度”属性设置其最大宽度

马修的答案在这里是正确的，但要进一步说明他的意思：

<div id="left"></div>
<div id="content">Content goes here</div>
<div id="right"></div>
<!-- probably need a cleanup div to fix floats here -->

看

重新调整窗口大小以观察ui的更改

网站使用最小宽度最大宽度，宽度：100%

---

黑色边框的最大宽度略宽于容器

间隔垫圈div是不好的做法。使用

text align:right

（如果要最大化左侧边距）或

text align:left

在模板上的DIV顶部设置另一个DIV，如果要最大化右侧边距，这将完成任务。

要模拟可变宽度的左侧边距：

body {
    margin-left: auto;
    margin-right: auto;
    width: 60em;
}

.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

遵循以下两个方面：

• 边际：0px 10%在480px的屏幕宽度上

• 余量：0px 10px在480px以下

---

没有一个答案100%适用于我
最好的方法是使用CSS

表格

和

表格单元格

。支持所有浏览器（甚至IE 8）。当页面太窄时，这比

float

或

inline block

解决方案更好地处理包装方式
CSS
HTML

---

我已经看到了一些非常吸引人的解决方案，但这里有一个解决方案需要的代码相对较少：
将主体内容放在其内部的div中，并使用

display:flex；证明内容：周围的空间


正文{
显示器：flex；
证明内容：周围的空间；
}
div{
保证金：3em；
宽度：100%；
最小宽度：60em；
背景颜色：灰色；
}

... 页面内容。。。
适用于2021年发表此文章的任何人。我想告诉你这篇文章给出的答案：

TLDR：不可能使用css数学函数
min
javascript？希望不会，因为这是他完成任务的唯一方法；）如果我正确地重编这个，他会尝试创建一个中心布局，其中内容的宽度是可变的，但最小为60em。另外，内容应该有3em的边距，如果浏览器窗口不够宽，边距会缩小。您可以使用css3媒体查询吗？好的，现在这就更有意义了。因此，当用户展开浏览器时，您是说实际上中央div将展开（但两边保留3em的边距）？随着浏览器的缩小（宽度方向），中央div也应缩小，但不应小于60em。它甚至可以侵蚀3em的边缘，以试图保持最低60em？这看起来很难看，但让我们看看。是的，它起作用了。谢谢，请看评论。对不起@媒体查询将为您提供浏览器宽度，您可以说，如果浏览器宽度小于最小宽度（如果媒体查询不适用于ems-不确定-那么大多数浏览器中960 px为60em），则将边距设为0。间隔div是五年前的一种技术。我讨厌它们，但是如果你必须的话，你可以使用：before和：after伪类来生成虚空间隔div，这些虚空间隔div实际上没有出现在你的标记中。浮动间隔div是有效的，但它不会阻止你清除页面中的浮动吗？因为清除的内容也将清除浮动间隔div，并显示在页面底部下方。这将使页面居中（仅）其他的“最大边距”似乎是不可能的。这里更详细一点/上下文/代码会更好。这不仅因为它有效，而且因为它确实有效！如果在左侧（或右侧）有一个额外的
，则必须使用
float:left
或等效值，并且内部
不能使用
宽度：100%
，因此您必须添加一个JavaScript或使用您的完美解决方案！很高兴知道你找到了适合你的东西。我很久以前就不再参与这种CSS疯狂行为了。：-）您可以运行，但决不能对CSS隐藏；）=这是一个很好的技巧。使用纯CSS实现这一点非常优雅，无需创建辅助的HTML DIV元素。
.div-class {
    display: inline-block;
}
.div-class:before {
    content: '';
    width: 10%;
    min-width: 100px;
    max-width: 200px;
    display: inline-block;
}

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

.wrapper {
    display: table;
    position: relative;
    width: 100%;
}

.wrapper:before {
    content: '';
    display: table-cell;
    min-width: 100px;
    width: 25%;
    max-width: 300px;
}

.wrapper > .content {
    display: table-cell;
    width: 100%;
}

<div class="wrapper>
    <div class="content>
        <!-- content here -->
    </div>
</div>