Question

我想这个问题同样适用于CSS和WordPress。我使用的是Bootstrap，但它并不一定与问题有关。

我的设计要求在WordPress页面中间使用全宽度部分（带文本的全宽图像）。该图基本上概述了布局：

http://postimg.org/image/xls5kg9yf/

灰色的页眉和页脚是全宽的。页面内容（黄色）位于Boostrap容器中，最大宽度为1170px。红色部分表示全宽div，图像和文本需要插入页面内容的中间。

实现这一目标的最佳方法是什么？由于显而易见的原因，页面内容必须位于容器类中。客户希望全宽度部分位于页面内容的中间，因为上方和下方的文本需要通过仪表板进行编辑。所以我不能只编辑页面模板并将全宽图像放在包含页面内容的容器之后。

position: absolute;无法正常工作，因为图片需要保留在页面流中。此外，Boostrap列使用position: relative，因此它只会将自身相对于父列定位，父列位于容器内，因此不会是100％宽度。

我可以使用margin-left: -9999px＆amp; margin-right: -9999px（或任何数字）使其100％宽度，但如果这些边距不等于窗口宽度 - 容器宽度，则背景图像将延伸超过100％。

我能想到的唯一可行解决方案是使用jQuery获取窗口宽度，然后将截面宽度设置为与窗口相同，左边距为负（窗口宽度 - 容器宽度））/ 2。

例如，如果窗口宽度为1400px，容器1170px，那么将使用脚本设置全宽度部分：

.full-width-section {
  width: 1400px;
  margin-left: -115px;
}

当然，在调整窗口大小时，脚本也需要运行。总的来说，这似乎是一个非常复杂的解决方案。使用CSS的任何简单解决方案都会令人惊叹。

以下是相关的CSS和HTML供参考：

HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      [page content, <?php the_content(); ?> is here on the page template]
      <div class="full-width-section"></div>
      [more page content]
    </div>
  </div>

CSS：

.container {
    width: 1170px;
}

.col-xs-12 {
    width: 100%;
    position: relative;
}

Answer 1

Jquery可能是解决方案。如何使用margin-left：-100％;？

否则你可以关闭.container类，设置你的滑块图像，然后再次启动.container ...这样你就可以使用滑块从完整的窗口进行计算。

Answer 2

我最后只是在全宽度部分之前关闭div，然后再打开它们。我实际上正在使用该部分的短代码，所以我只是添加了HTML来关闭然后重新打开标签到短代码的输出。

这当然不是最佳做法，但在那个或复杂的jQuery替代品之间，这是更容易的方法。

Answer 3

如果您不需要支持IE8，那么还有另一种解决方案。这不涉及使用绝对定位或jQuery对标记进行任何修改。

相反，您可以使用css calc（）函数和视口单位来应用正负边距和填充。

我做了一个例子@ http://codepen.io/manuszep/pen/pvqqwp/

负左边距的计算如下：

margin-left: calc(((-100vw + 960px) / 2) - 20px);

其中960px是页面的宽度，20px是容器的填充

要将内容再次居中到包装器的大小，您可以重新应用填充：

padding-right: calc(((100vw - 960px) / 2) + 20px);
padding-left: calc(((100vw - 960px) / 2) + 20px);

这样，你的div背景是视口宽度的100％，但它的内容与你的容器一样宽。

我尝试使用％设置的容器宽度，但它无法正常工作。

在WordPress中将100％宽度的div放在页面内容的容器中

3 个答案: