html - 我怎样才能让我的 wrapper 在特定部分向右流血？

Question

对于一个元素，我有一个页面，其中所有内容都在包装器中，并且随着屏幕尺寸变大，我会缩放该包装器。想象每个盒子都是一个部分。

中间部分向右渗出，但与 wrapper 一样向左留出相同的边距。我不知道该部分的确切宽度 + 右边的边距，如果我知道，当它缩放时它会改变。我希望随着浏览器的变化，左侧与其他部分内联缩放，就像在常规包装器中一样。

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

这就是你想要的吗？ 无论如何， wrapper 都将与左侧保持相同的距离。 尽管我不确定您是否希望 wrapper 始终位于中心 center (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>