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

Posted 2023-03-06

【中文标题】这个网站上的最大宽度是如何设置的？ [关闭]

【英文标题】：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...谢谢谢谢谢谢！

【参考方案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 还显示了此列宽 - 以及每个部分的不同之处等。