这个网站上的最大宽度是如何设置的？ [关闭]答案

【问题标题】：How is max width being set on this site? [closed]这个网站上的最大宽度是如何设置的？ [关闭]
【发布时间】：2014-05-31 19:50:56
【问题描述】：

本站：http://www.samuelgrant.co.uk

这正是我想要构建的那种设置。但是，我一直无法弄清楚如何设置该站点的最大宽度。我想要一个像这个网站一样居中的主要内容区域，背景延伸到整个浏览器宽度。任何人都可以启发我吗？这里的相对新手......任何帮助将不胜感激。谢谢！

【问题讨论】：

有一个线索，如果你查看/来源。它在评论中说：响应式网格系统取自responsivegridsystem.com
是的，这与我使用的网格相同...在 CSS 中，但是，没有设置我可以看到的最大宽度...外包装指定为 100% 和所有里面的东西是用百分比计算的。我仍然不明白最大宽度是如何确定的，以及为什么整个网站不只是拉伸以填满窗口。
width:100% 拉伸到整个浏览器宽度，margin-left:auto;margin-right:auto; 将内容区域居中对齐。
我看到 max-width: 72em; 的几个 CSS 定义。请参阅 samuelgrant.css 第 454 行中 .inner 的定义。
ahhhhh ems，不是 px...谢谢谢谢谢谢！

标签： html css responsive-design

【解决方案1】：

HTML

<div class="container">
    <div class="inner-w">
        Stuff in your inner column
    </div>
</div>

CSS

body {
    margin: 0;
}

.container {
    background-color: #f06;
}

.container .inner-w {
    max-width: 50em; /* or 400px etc */
    margin-right: auto;
    margin-left: auto;
}

a jsFiddle 还显示了此列宽 - 以及每个部分的不同之处等。

【讨论】：