html - 全宽元素中的内容应该容器化

Question

当我说到“容器”时，它是这样定义的元素

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

这在多个场合应用，目的是大多数元素在大屏幕上应该有相同的左右边界。对于这个问题，请忽略比桌面小的 View 。

我遇到的问题是当我想要一个分为两列的全宽元素时。并且这两列的内容应该遵守相同的左右边界，所以只有背景是全宽的，而它们的内容不是。

我当前的代码结果是这样的

它应该是这样的

(在实际代码中，左边的元素有一个图像而不是背景颜色，所以我不能用渐变或类似的方式伪造背景。)

我尝试了各种方法，a) 不知道如何正确搜索它，b) 无法自行解决。

附件是当前代码的一个工作示例。标记并非一成不变，因此请随意添加元素。

header {
  box-shadow: 0 0 0.3125rem 0 rgba(28, 39, 44, 0.5);
}

.container {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}

header>.container {
  display: grid;
  grid-template-columns: auto auto;
}

header>.container>*:last-child {
  text-align: right;
}

p {
  text-align: justify;
}

.alignfull {
  width: 100%;
  max-width: unset;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#left {
  background-color: #eee;
  grid-column-end: span 7;
}

#right {
  background-color: #aaa;
  grid-column-end: span 5;
}

<header>
  <div class="container">
    <div>first left aligned</div>
    <div>last right aligned</div>
  </div>
</header>
<div id="main">
  <div class="alignfull">
    <div id="left">
      <div id="left-element">
        Hello World
      </div>
    </div>
    <div id="right">
      <div id="right-element">
        Lorem ipsum dolor sit amet,
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      Cupcake ipsum dolor sit amet lemon drops tart halvah. Cookie brownie cupcake icing oat cake. Ice cream pie lemon drops ice cream caramels wafer jujubes carrot cake. Liquorice cheesecake topping danish. Toffee sweet pie gummi bears biscuit dessert topping.
      Macaroon gingerbread chocolate cake macaroon danish tart cheesecake danish cheesecake. Powder candy canes candy canes liquorice muffin cake gummies. Chupa chups pudding tart sesame snaps fruitcake cotton candy chocolate.
    </p>
  </div>
</div>

更新:如果我不清楚，我很抱歉，但是其他答案在这种情况下没有帮助。问题是 2 列。

拥有 100% 的外部元素并在内部放置一个 .container 会弄乱列。 (我希望这个解释是清楚的，如果不是，请评论)

Answer 1

根据评论，您可以添加 calc((100vw - 300px)/2) 作为左列的 padding-left 和 padding-right 的右列来实现这一点。这个公式是用页面的整个宽度 (100vw) 减去中间栏的大小 (300px)，并将剩余的宽度减半，以便平均分配左右空间。

html, body {
margin: 0;
padding:0;
}

header {
  box-shadow: 0 0 0.3125rem 0 rgba(28, 39, 44, 0.5);
}

.container {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}

header>.container {
  display: grid;
  grid-template-columns: auto auto;
}

header>.container>*:last-child {
  text-align: right;
}

p {
  text-align: justify;
}

.alignfull {
  width: 100%;
  max-width: unset;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#left {
  background-color: #eee;
  grid-column-end: span 7;
  padding-left: calc((100vw - 300px) / 2);
}

#right {
  background-color: #aaa;
  grid-column-end: span 5;
  padding-right: calc((100vw - 300px) / 2);
}

<header>
  <div class="container">
    <div>first left aligned</div>
    <div>last right aligned</div>
  </div>
</header>
<div id="main">
  <div class="alignfull">
    <div id="left">
      <div id="left-element">
        Hello World
      </div>
    </div>
    <div id="right">
      <div id="right-element">
        Lorem ipsum dolor sit amet,
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      Cupcake ipsum dolor sit amet lemon drops tart halvah. Cookie brownie cupcake icing oat cake. Ice cream pie lemon drops ice cream caramels wafer jujubes carrot cake. Liquorice cheesecake topping danish. Toffee sweet pie gummi bears biscuit dessert topping.
      Macaroon gingerbread chocolate cake macaroon danish tart cheesecake danish cheesecake. Powder candy canes candy canes liquorice muffin cake gummies. Chupa chups pudding tart sesame snaps fruitcake cotton candy chocolate.
    </p>
  </div>
</div>