Question

我正在开发带有主题选项页面的Wordpress主题。在这些选项中，可以设置网站的最大宽度，但是我在内容区域上遇到了一些困难。

填写max-width后，页眉和页脚区域将得到max-width和margin: O auto;。

将使用古腾堡生成器创建内容页面，并且我希望能够将背景属性添加到我使用的块中并以全角显示它们，但是内容将落入已定义的最大宽度以前。

HTML：

<header class="site-header">
   <div class="header-wrapper"></div>
</header>
<main class="site-content">
   <article class="post-10">
      <header></header>
      <div></div>
      <footer></footer
   </article>
</main>
<footer class="site-footer">
   <div class="header-wrapper"></div>
</footer

CSS：

.header-wrapper,
.footer-wrapper,
article {
     max-width: 1366px;
     margin: 0 auto;
}

我明白了：

我希望背景是全角的，但内容要与页眉和页脚的内容相同。

是否可以为页面的页眉，内容和页脚部分设置相同的max-width，并确保内容区域中的背景仍然为全角？

Answer 1

您可以通过将add_theme_support( 'align-wide' );添加到functions.php文件中来激活“广泛对齐”和“完全对齐”。然后，用户可以选择在整个视口宽度上对齐图像。

另请参见https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features

但这是用于图像，而不是背景。

对于背景区域/图像，您可以尝试创建常规块（内容区域的100％），其边距设置如margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);（与全角古腾堡块相同）和padding-left / padding-正确的calc(50vw - 50%);：那样，该块将跨越整个视口宽度，但是内容区域将具有内容区域的宽度（全宽减去填充）。您还必须将要在“内容”列中使用的常规填充添加到这些值。

Answer 2

如果我理解，那么您的CSS应该看起来像这样：

.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
     max-width: 1366px;
     margin: 0 auto;
}
article{
     width: 100%;
     background: blue;
}

但仅当为文章中的这3个div设置了max-width时

content-block是否由article代表？

更新

我从https://css-tricks.com/full-width-containers-limited-width-parents/重新创建了代码笔

https://codepen.io/anon/pen/eaJyqV

如果可能的话，您可以在图像上加上position: absolute，然后在文本上加上position: absolute，但我想您的内容块不能那样工作； /

我可以对内容使用最大宽度，但对背景使用全角吗？

2 个答案: