CSS 中的固定列布局

Question

該網站如何能夠將內容“向內”推入頁面而沒有邊距。 在我看來，它們具有單列固定布局，但我不明白這是如何完成的。 也許用 flexbox？

使屏幕截圖中的標簽具有如此小的寬度的 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>