修复了 CSS 中的列布局

Question

这个网站如何能够将内容“向内”推入页面，没有边距。在我看来，他们有一个单列固定布局，但我不明白这是如何完成的。也许用弹性盒？使屏幕截图中的标签宽度如此之小的 CSS 代码是什么？我添加了一些红色箭头来突出显示我的意思。基本上，从浏览器的最左边到标签似乎没有边距，尽管有一些东西将内容保存在页面的中心。

Answer 1

他们使用名为 Widecontainer 的容器，其样式如下

.widecontainer {

   position: relative;

   max-width: 1080px;

   margin: 0 auto;

   padding: 0 20px;

}

这是网站中的常见做法，我在网站中使用边距容器，代码如下

.margins-container {

    width: 85%;

    max-width: 1244px;

    margin: 0 auto 0 auto;

    @media (max-width: $tablet) {

         margin: 0 auto 20px auto;

     width: 95%;

     }

    &.no-margin {

        margin: 0 auto;

    }

    &.constrained {

        width: 85%;

    }

}

在每个新部分中，它们将包含边距容器，以确保网站保持在相同的限制范围内，但同时可以通过仅一个选择器的样式进行调整。

使用这样的边距容器通常会遵循这种格式

<section class="main-content">

  <div class="margins-container">

    // content

  </div>

</section>

<section class="secondary-content">

  <div class="margins-container">

    // secondary content

  </div>

</section>