Question

我希望能够创建一个横跨整个屏幕宽度的div。问题是，这应该与Weebly的设计系统一起使用，它将其置于固定宽度的div内。

内容创建如下：

#main-wrap {
        width:100%;
}

.container {
    margin: 0 auto;
    width: 960px;
    position: relative;
}

<div id="main-wrap">
    <div class="container">
        {content}
    </div><!-- end container -->
</div><!-- end main-wrap -->

内部{content}是Weebly发挥其魔力并放置所有东西的地方。我试图直接嵌入一些代码：

.wide {
    position: absolute;
    left:0; right:0;
    width: 100vw;
    background: #aaccff;
}

<div class="wide">
    Test
</div>

但是这不起作用，并且宽div比屏幕宽，但只在与内容div相同的左侧位置开始。

有谁知道如何在容器内部获得100％宽的div。我也可以制作100％宽的容器，但是所有的Weebly小部件都会占据屏幕的全长，并且我不清楚如何修改CSS以使它们具有固定的宽度。

谢谢！

Answer 1

因为父母已经相对定位了。因此，请从元素position: relative;

中删除.container

Weebly打破了内容div

1 个答案: