Html 以固定宽度转义CSS列

如果你被困在一个换页中，比如说页面的所有内容都在一个宽度为900px的div中，那么你需要一个div，这个div就是整个页面的宽度。最简单的方法是什么

我知道你可以结束900px的div，进行全宽div，然后开始另一个900px div，但是有没有一种方法可以设计内部div的样式，这样你就不必逃避它？100vw的工作原理是使其尺寸合适，但没有将其定位在正确的位置

如此简单的例子：

<div style="width:900px;margin-right:auto;margin-left:auto;display:block;">
   <p>text text</p>
   <div style="width:100vw;">
      <p>I want this section to be the full page width and centered</p>
   </div>
   <p>text text</p>
</div>

文本

我希望这个部分是整页的宽度和中心

文本

---

谢谢

您可以使用负左边距

（-50vw+一半母宽）

body{margin:0；}
#a{背景：红色；}
#{背景：绿色；左边距：计算（-50vw+200px）

文本

我希望这个部分是整页的宽度和中心

文本

我不建议尝试将子div“转义”为其父级，因为使用这种方法将需要毫无意义的复杂CSS。使用容器div和两个嵌套的子级，您可以实现所需的功能，这是一个更简单的解决方案：

。狭窄{
宽度：300px；
保证金：0自动；
背景色：番茄；
填充：16px；
}
.满{
背景颜色：金色；
填充：16px；
}

文本文本文本

更多的文字或图像或其他

文本文本文本

我认为，你试图解决这个问题的方式对实际的网站没有多大帮助。通常，你会有一个容器，即你的顶部div，其中包含较低的元素。让一个子元素像你希望的那样超出它的父div，这与你的想法背道而驰

当然，有时你可能想把一个元素放在其父元素之外，你可以使用pavel的答案。例如，你可能想给一条线移动设置动画。你可以将该元素偏移-100%，然后更改该偏移以给它移动的感觉。但这是一种特殊情况

为了解决您的问题，我将使用以下结构：

---

div是块元素，默认情况下采用完整的可用宽度，因此您根本不需要任何样式来实现您的要求。

<div class='container'>
  
  <div class='thin'>
     <p>text text</p>
  </div>
  
   <div class='full-width'>
      <p>I want this section to be the full page width and centered</p>
   </div>
  
  <div class='thin'>
   <p>text text</p>
  </div>
  
</div>

.container{
  text-align:center;
  padding: 0 5vw; //padding of 5vw to the left and right
}
.thin{
  width:80vw;
  margin: 0 auto;
  background-color:yellow;
}
.full-width{
  background-color:green;
}