如何使包裝紙在特定部分向右流血？

Question

對於一個項目，我有一個頁面，其中所有內容都在包裝器中，並且隨着屏幕尺寸變大，我縮放該包裝器。 想象每個盒子都是一個部分。

中間部分向右流血，但在左側保持與包裝器相同的邊距。 我不知道該部分的確切寬度+右側的邊距，如果我知道，當它縮放時它會改變。 當瀏覽器像在常規包裝器中一樣發生變化時，我希望左側與其他部分內聯縮放。

https://codepen.io/seandaniel/pen/oNvKjop

 .wrapper { width: 60rem; margin: 0 auto; }.section-1 { background-color: black; width: 100%; height: 200px; }.section-2 { background-color: blue; /* this width is just to show what I want it to look like */ width: 1224px; height: 200px; margin-left: auto; }.section-3 { background-color: orange; width: 100%; height: 200px; }

 <main> <div class="wrapper"> <section class="section-1"> </section> </div> <section class="section-2"> </section> <div class="wrapper"> <section class="section-3"> </section> </div> </main>

Answer 1

這是你想要發生的事情嗎？ 無論如何，包裝器將與左側保持相同的距離。 盡管我不確定您是否始終希望將包裝器放在中心中心（x，y）。

CSS

 .wrapper { border: 1px solid green; width: 100%; position: absolute; left: 45px; }.section-1 { background-color: black; width: 100%; height: 200px; position: relative; }.section-2 { background-color: blue; width: 125%; height: 200px; margin-left: auto; position: relative; }.section-3 { background-color: orange; width: 100%; height: 200px; position: relative; }

 <main> <div class="wrapper"> <section class="section-1"> </section> <section class="section-2"> </section> <section class="section-3"> </section> </div> </main>

Answer 2

1. 在您的.section-2 class 添加以下 css 規則margin-right: calc(50% - 50vw);
2. 您還需要將<section class="section-2"></section>嵌套到與其他部分相同的<div class="wrapper"></div>中，以獲得相同的左側 alignment。

如果您希望它向左流血，請使用margin-left: calc(50% - 50vw); 而不是margin-right ，或者兩者都必須是全寬。

這個頁面有很多關於在容器內操作邊距的好信息。 有限寬度父級中的全寬容器

 .wrapper { width: 60rem; margin: 0 auto; }.section-1 { background-color: black; width: 100%; height: 200px; }.section-2 { background-color: blue; height: 200px; margin-right: calc(50% - 50vw); }.section-3 { background-color: orange; width: 100%; height: 200px; }

 <main> <div class="wrapper"> <section class="section-1"> </section> </div> <div class="wrapper"> <section class="section-2"> </section> </div> <div class="wrapper"> <section class="section-3"> </section> </div> </main>