html - 忽略父最大宽度 css

Question

我的网站上有一个容器，可以将所有内容保持在一定宽度内，就像这样......

HTML

<div class="container">
// content in here
</div>

CSS

.container{
   max-width: 1300px
}

现在我有一个 div，我想忽略最大宽度并延伸到边缘，但我不希望它绝对定位并从网站流中取出，所以我这样做了..

HTML

<div class="extend-past">
   // content here
</div>

CSS

.extend-past{
   width: 100vw;
   height: 200px;
}

所以这给了我正确的宽度，但它仍然遵循父容器的最大宽度，而不是从窗口的左边缘开始，但是现在我可以给它一个负边距的父容器的边缘。 . 因为窗口的宽度改变了负边距不会总是正确的.. 我怎样才能在不让它成为绝对元素的情况下解决这个问题？？

谢谢

Answer 1

子元素默认左对齐。

-------------
|-----      |
-------------

您可以尝试将其居中:

-------------
|   -----   |
-------------

但是如果一个元素太大，它会粘在左边:

-------------
|-----------|---------
-------------

然后你可以做的是将它从左边居中(margin-left: 50%):

-------------
|     ------|--------------
-------------

如果您现在将子元素的 X 轴向左移动 50% ( x - 50 )，您将得到:

    --------------
----|------------|----
    --------------

.container {
  background-color: green;
  margin: 0 auto;
  max-width: 50%;
  padding: 10px;
}

.container > div {
  width: 80%;
  height: 50px;
  margin: 5px auto;
  background-color: red;
}

.container > div.overflow {
  width: 150%;
}

.solution .overflow {
  transform: translateX(-50%);
  margin-left: 50%;
}

<!-- Problem situation -->
Problem situation:
<div class="container">
  <div>
    Item 1
  </div>
  <div class="overflow">
  Item 2
  </div>
</div>

<!-- Solution -->
Solution:
<div class="container solution">
  <div>
    Item 1
  </div>
  <div class="overflow">
  Item 2
  </div>
</div>