声明

Question

当我在Wordpress中关闭terrifico主题中的博客部分和侧边栏时，我似乎无法在任何地方放置全宽滑块。

正如您所看到的，所有文字都是有限的＆＃39;用一个盒子（黑线）。有没有什么方法可以让metaslider走到这个盒子的外面（即跨越页面的全宽）？我不一定想摆脱盒子，文本可以保留在其中。

我在Metaslider网站上看到某些主题的某些解决方案已经给出（here - 但我不知道如何使其适应我正在使用的主题。

提前致谢！

Answer 1

在我提出解决方案之前，我想指出你所要求的是打破Box流模型。我不建议这样做，因为您可能会在浏览器中遇到不一致的结果。

那就是说，你想要实现的目标是可能的。您可以使用javascript来执行此操作，实际上在某些方面可能更容易，但这是一个CSS解决方案。

1。打破盒子模型

float: left;
width: 200%;
margin-left: -50%;
text-align: center;

float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它

容器的宽度仍然相对于其父级，因此如果使用％单位来扩展它，则需要补偿父级的响应性。在这里，我只是过度补偿。

为了确保我们的元素保持居中，我们使用负的边距，这是溢出的一半。也就是说，我们希望我们的盒子是100％宽，我们有100％溢出，以确保溢出的一半是50％（如果没有意义，请在下面评论）。

我们使用 text-align 将我们在步骤3中添加的元素放在视口的中心。

这是您可以打破主题的地方。如果父元素具有overflow: hidden属性，则它们将隐藏浮动在它们之外的元素（注意overflow也可以用于显示滚动条）。

您需要确保父元素具有：

#post-body, .content-posts-wrap {
    overflow: visible;
}

据我所知，这会影响#post-body和.content-posts-wrap

现在我们的滑块有一个超大容器，但我们需要它是页面的宽度。在div内部或者你想要将滑块放入其中的任何内容都需要嵌套另一个正确宽度的元素。该元素将需要以下css：

display: inline-block;
width: 100vw;
text-align: left;

您需要显示，因为我们现在回到了盒子模型，我们希望我们的块遵守我们给它的宽度规则。

我们使用vw（viewport width）单位设置宽度以使其更容易一些（但可能不支持on your target browser）。如果没有vw单位，可能会有一些创造性的方法，但如果它不是你的选择，我可能只会使用javascript。

最后，由于我们在上面设置了 text-align ，我们需要在此重置它。

因为你已经脱离了流程，元素不太清楚该怎么做。您可能希望在父滑块

之后添加另一个元素

指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。 source

它可以像<div>元素一样简单：

clear: both

Answer 2

编写类似这样的代码......

像这样的HTML ......

 <div  id="parent_for_slider">
        <div id="slider">
            //place your slider code
        </div>
    </div>

Css for that

#parent_for_slider{
position:relative;
}

#slider{
position:absolute;
width:100% !important;
height:auto;
}

我建议使用ResponsiveSlides.js作为响应速度的全宽度滑块