修复了 CSS 中的列布局

Question

这个网站如何能够将内容“向内”推入页面，没有边距。在我看来，他们有一个单列固定布局，但我不明白这是如何完成的。也许用弹性盒？

使屏幕截图中的标签宽度如此之小的 CSS 代码是什么？我添加了一些红色箭头来突出显示我的意思。基本上，从浏览器的最左边到标签似乎没有边距，尽管有一些东西将内容保存在页面的中心。

Answer 1

他们使用名为 Widecontainer 的容器，其样式如下.widecontainer {&nbsp; &nbsp;position: relative;&nbsp; &nbsp;max-width: 1080px;&nbsp; &nbsp;margin: 0 auto;&nbsp; &nbsp;padding: 0 20px;}这是网站中的常见做法，我在网站中使用边距容器，代码如下.margins-container {&nbsp; &nbsp; width: 85%;&nbsp; &nbsp; max-width: 1244px;&nbsp; &nbsp; margin: 0 auto 0 auto;&nbsp; &nbsp; @media (max-width: $tablet) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: 0 auto 20px auto;&nbsp; &nbsp; &nbsp;width: 95%;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &.no-margin {&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; }&nbsp; &nbsp; &.constrained {&nbsp; &nbsp; &nbsp; &nbsp; width: 85%;&nbsp; &nbsp; }}在每个新部分中，它们将包含边距容器，以确保网站保持在相同的限制范围内，但同时可以通过仅一个选择器的样式进行调整。使用这样的边距容器通常会遵循这种格式<section class="main-content">&nbsp; <div class="margins-container">&nbsp; &nbsp; // content&nbsp; </div></section><section class="secondary-content">&nbsp; <div class="margins-container">&nbsp; &nbsp; // secondary content&nbsp; </div></section>