在 HTML 中转义更高级别的 div css

Question

让我举一个我的问题的例子：我正在使用magento(只是解释(，我想制作一个全宽横幅。也许，Magento默认放置一个

类="容器">

div 限制他们拥有的自定义网格的宽度。所以，当全宽横幅被放置在具有最大宽度设置的div 中时，我不知道该怎么做才能获得全宽横幅(由 Magento 结构强制(。

事实上，我做了一些"边距"和"填充"配置，但我试图避免只为一个横幅提供这种夸张的路径。

这是我的例子：https://jsfiddle.net/mq4sr8d8/1/

<div class="background-size"><div class="outside"><div class="inside"></div></div></div>

Answer 1

你可以实现你想要的 - 如果外部div 居中，你需要以下样式用于内部：

.inside {
background-color: #ababab;
width: 100vw;                   /* make as wide as viewport */
margin-left: 50%;               /* move it 50% right width of container */
transform: translateX(-50%);    /* move it 50% left width of itself (to make it start at beggining of screen */
height: 100%;
}

居中容器小提琴

如果您的容器左对齐，只需添加width:100vw

左容器小提琴