這個網(wǎng)站如何能夠?qū)?nèi)容“向內(nèi)”推入頁面，沒有邊距。在我看來，他們有一個單列固定布局，但我不明白這是如何完成的。也許用彈性盒？使屏幕截圖中的標(biāo)簽寬度如此之小的 CSS 代碼是什么？我添加了一些紅色箭頭來突出顯示我的意思。基本上，從瀏覽器的最左邊到標(biāo)簽似乎沒有邊距，盡管有一些東西將內(nèi)容保存在頁面的中心。
1 回答
繁花如伊
TA貢獻2012條經(jīng)驗 獲得超12個贊
他們使用名為 Widecontainer 的容器，其樣式如下
.widecontainer {
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}
這是網(wǎng)站中的常見做法，我在網(wǎng)站中使用邊距容器，代碼如下
.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%;
}
}
在每個新部分中，它們將包含邊距容器，以確保網(wǎng)站保持在相同的限制范圍內(nèi)，但同時可以通過僅一個選擇器的樣式進行調(diào)整。
使用這樣的邊距容器通常會遵循這種格式
<section class="main-content">
<div class="margins-container">
// content
</div>
</section>
<section class="secondary-content">
<div class="margins-container">
// secondary content
</div>
</section>
- 1 回答
- 0 關(guān)注
- 114 瀏覽
添加回答
舉報
0/150
提交
取消