html - Wordpress 如何使 slider 全宽(Metaslider)

Question

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

主题在我所说的形式中看起来像这样:http://vpthemes.com/preview/Terrifico/page-full-width/

如您所见，所有文本都被一个框(黑线)“包围”。有什么方法可以使 metaslider 超出此框(即跨越页面的整个宽度)？我不一定要一起摆脱盒子，文本可以留在里面。

我在 Metaslider 网站上看到给出了某些主题的一些解决方案(here - 但我不确定如何使它适应我正在使用的主题。

提前致谢!

Answer 1

免责声明

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

就是说，您尝试完成的是可能的。您可以使用 javascript 来执行此操作，实际上在某些方面它可能更容易，但这里有一个 CSS 解决方案。

1。开箱即用模型

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

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

容器的宽度 仍然相对于其父级，因此如果您使用 % 单位来放大它，您将需要补偿父级的响应能力。在这里，我只是过度补偿了。

为了确保我们的元素保持居中，我们使用负的 ma​​rgin，它是溢出的一半。也就是说，我们希望我们的盒子是 100% 宽，我们有 100% 的溢出以确保一半的溢出是 50%(如果这没有意义，请在下面评论)。

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

2。允许溢出

这是您很可能会破坏主题的地方。如果父元素具有 overflow: hidden，它们将隐藏 float 在它们之外的元素。属性(注意 overflow 也可用于显示滚动条)。

您需要确保父元素具有:

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

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

3。添加一个大小合适的元素

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

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

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

我们使用 vw 设置我们的宽度 ( viewport width ) 单位使这更容易一点(但它们可能不受支持 on your target browser )。可能有一些巧妙的方法可以在没有 vw 单位的情况下做到这一点，但如果它不适合您，我可能只会使用 javascript。

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

4。添加清算股本

因为你已经脱离了流程，所以元素不太确定该做什么。您可能想在父 slider 之后添加另一个元素

specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source

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

clear: both