在 HTML 中转义更高级别的 div css [重复]答案

【问题标题】：Escape higher level div css in HTML [duplicate]在 HTML 中转义更高级别的 div css [重复]
【发布时间】：2018-05-09 21:43:45
【问题描述】：

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

class="容器"

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

事实上，我做了一些“margin”和“padding”配置，但我试图避免只为一个横幅而使用这种详尽的路径。

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

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

【问题讨论】：

标签： html css

【解决方案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%;
}

Centred container fiddle

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

Left container fiddle

【讨论】：