半页全宽样式 CSS

Question

我目前正在这个网站上工作：http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com)。

我知道还有另一种解决方案，即在内容容器上方创建一个容器或小部件，我将页面文本的第一部分放在其中。问题是它让我感到困惑客户端在哪里编辑页面中的文本。那时 Wordpress 的简单性基本上消失了。因此，我正在寻找具有 CSS 样式的解决方案，因此客户端只处理 's.

有人对此有解决方案吗？

Answer 1

您在 css 中设置了此规则：

.block-type-content {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 120px;
}

所以这个容器的children，即使它们的宽度可能是100%，也必须服从它们parent的填充。这就是为什么您没有得到全宽绿色条的原因。您可以尝试负数 margin-left 并向右扩展您的绿色条：

.color {
    margin: 0 -25px;
    padding: 0 25px;
}

至少在 Firefox/Mac，这可以解决您的问题。

Answer 2

由于您已经为内容块预先设置了一个padding，这显然会影响其中包含的所有子元素，包括带有绿色背景的 div，这意味着您应该删除该填充并将其仅应用于特定元素，或者将此简单的 CSS 解决方法应用于您的div:

{
    margin: 0 -25px;
    padding: 0 25px;
}

用您的话来说，这就是 "full width" 并对其内容应用了填充。

半页全宽样式 CSS

half page full width Styling CSS

html

css

wordpress