Question

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

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

此选项可多次应用，其目标是在大屏幕上大多数元素的左右边界应相同。对于此问题，请忽略比桌面小的视图。

我遇到的问题是当我想要将全宽元素分为两列时。并且这两列的内容应遵循相同的左右边界，因此只有背景是全角，而内容没有。

我当前的代码会导致类似的情况

它应该看起来像这样

（在实际代码中，左侧元素具有图像而不是背景颜色，因此我不能伪造具有渐变或类似颜色的背景。）

我尝试了各种方法，并且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>

全宽元素内的内容应被容器化

1 个答案: