我需要一个最大保证金CSS属性，但它不存在。 我怎么能假的？

我正在试图做一个简单的页面，具有以下特点：

1. 它的身体必须至less60em宽。
2. 其左右边距必须相等，最宽3em。
3. 当浏览器窗口被resize时，应调整文档的边距，以便浏览器窗口的水平滚动条覆盖可能的最小范围。

将这些需求转化为线性规划问题，我们得到：

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 

（对不起，这个无聊的math，但我不相信原来的英文解释是清楚的。）

---

现在回到实际的页面。 在用Googlesearch我能用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

内容divs的任一侧上的空格隔开。 那些是你的利润。 使用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创build一个中断点。
2. 使用响应宽度度量（例如em或％或超过该大小）使用静态宽度（如px）将最大宽度规则设置为特定大小以下。

你只需要做math计算在断点的静态大小，以确保它stream畅的规模。

示例代码：

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

这将使.my_class跟随两个：

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

Answer 4

马修的答案在这里是正确的，但要扩大他的意见：

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

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

Answer 6

间隔div是不好的做法。 使用text-align:right （如果要最大化边距左移）或text-align:left在模板上的DIV顶部设置另一个DIV text-align:left如果要最大化边距右移，可以执行此操作。

Answer 7

没有答案为我工作100％。

最好的方法是使用CSS table和table-cell 。 所有浏览器支持（甚至IE 8）。 当页面太窄时，这比float或inline-block解决scheme更好地处理包装方式。

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%; } 

HTML

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

Answer 8

见http://www.labite.com/

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

网站使用宽度最小宽度：100％

黑框的最大宽度比容器宽一点。