0

我希望能够创建一个跨越整个屏幕宽度的 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 以使它们具有固定宽度。

谢谢！

4

1 回答 1

0

这是因为父级是相对定位的。所以，position: relative;从元素中删除.container

于 2015-03-16T07:40:30.287 回答