亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

修復了 CSS 中的列布局

修復了 CSS 中的列布局

千巷貓影 2023-10-10 16:53:59
這個網站如何能夠將內容“向內”推入頁面,沒有邊距。在我看來,他們有一個單列固定布局,但我不明白這是如何完成的。也許用彈性盒?使屏幕截圖中的標簽寬度如此之小的 CSS 代碼是什么?我添加了一些紅色箭頭來突出顯示我的意思?;旧?,從瀏覽器的最左邊到標簽似乎沒有邊距,盡管有一些東西將內容保存在頁面的中心。
查看完整描述

1 回答

?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

他們使用名為 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>


查看完整回答
反對 回復 2023-10-10
  • 1 回答
  • 0 關注
  • 103 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號