我需要一个最大边距的 CSS 属性，但它并不存在。我怎样才能伪造它？

我试图做一个简单的网页，具有以下特点:

  1. 它的身体至少有60米宽。
  2. 它的左右边距必须相等宽，最多3米宽。
  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

(不好意思，这个数学题太无聊了，但我不确定原来的英文解释是否足够清楚。)

现在回到实际的页面。在用 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并不存在，我怎么能伪造它呢？

110768 次浏览
小开
最佳答案

内容 div 两边的间隔 div。那是你的利润。使用 max-width 属性设置它们的最大宽度。

小开

马修的回答在这里是正确的，但是为了扩展他所说的:

<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;
}
小开

参见 http://www.labite.com/

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

该网站使用最小宽度最大宽度宽度: 100%

黑色框架有最大宽度，这是稍微宽于容器。

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

太空潜水不是好习惯。在模板上的 DIV 之上再设置一个 DIV，使用 text-align:right(如果你想最大化左边距)或者 text-align:left(如果你想最大化右边距) ，这样就可以了。

小开

模仿可变宽度的左边距:

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

对于在任何场景下都可以工作的纯 CSS:

  1. 使用 @ media创建断点。
  2. 设置一个 最大宽度规则低于一定的大小使用响应宽度测量，如 Em或 %和超过该大小使用静态宽度，如 Px。

您只需要计算出断点处的静态大小，以确保它可以流畅地扩展。

示例代码:

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

这将使 .my_class同时遵循以下两点:

  • 屏幕宽度超过 480px的 margin: 0px 10%;
  • 在 480px下面的 margin: 0px 10px;。
小开

没有一个答案对我百分百有效。

最好的方法是使用 CSS table和 table-cell。所有浏览器(甚至 IE8)都支持。当页面太窄时，这种方法比 float或 inline-block解决方案更好地处理包装。

CSS 

.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>
小开

我已经看到了一些非常吸引人的解决方案，但这里有一个解决方案，需要相对较少的代码:

将主体的内容放在主体内部的 div 中，并使用 display: flex; justify-content: space-around;

body {
display: flex;
justify-content: space-around;
}


div {
margin: 3em;
width: 100%;
min-width: 60em;
background-color: gray;
}
<body>
<div>
... contents of the page ...
</div>
</body>

灰色的背景只是为了可视化产生的身体。

小开

对于2021年来到这个岗位的任何人来说。我想指出你在这篇文章中给出的答案: 我们可以在 css 中定义最小边距和最大边距、最大填充和最小填充吗？。

TLDR: 使用 css 数学函数 min


提交答案