css - 页脚列拉伸(stretch) - 使列背景拉伸(stretch)全宽

Question

我的页脚在一个容器中有四列。它需要在容器内以与上面的内容对齐。

我的问题是我想让左栏有红色背景，但目前它不会拉伸(stretch)，因为它显然在容器中。

我怎样才能将它向左拉伸(stretch)整个宽度，同时保持它与上面的内容对齐。

<footer class="cf">
    <div class="container">

    <div class="test11" style="width: 25%; float: left; background: red;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="test11" style="width: 25%; float: left;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="test11" style="width: 25%; float: left;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="test11" style="width: 25%; float: left;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    </div>
</footer>


    .container {
        width: 1170px;
        margin: 0 auto;
    }
footer {
    background: grey;
}

Answer 1

据我所知，你不能像你所说的那样直接“拉伸(stretch)”它。但是，我为您做了一些解决方法here 它包括:

• 使用伪元素 :before(使用 :nth-of-type(1) 分配给第一个页脚列)，我们将使用它来创建相同的红色第一列左侧的背景
• 将 :before 元素定位到 position: absolute; 以便使用 left: 0; 这会将红色背景放在最后定位元素的左边缘
• 现在我们的 :before 元素相对于最近定位的祖先元素定位 - 在我们的例子中是 html 元素本身。但是我们希望它相对于尚未定位的页脚定位，我们使用 position: relative; 来实现(更多关于 here )
• 添加内容:“”；高度:100%； width: 25%; 所以它实际上出现了
• 添加 z-index: -1; 将 before 元素放在实际元素后面。了解一下 here
• 将 z-index: 0; 添加到 footer 元素以将其包含到定位上下文中
• 添加background-color: red;

最后添加的代码:

footer{
z-index: 0;
position: relative; 
}

.test11:nth-of-type(1):before{
position: absolute;
left: 0;
content: " ";
height: 100%;
width: 25%;
z-index: -1;
background-color: red;
}

一些提示:

• 不要使用内联样式。 Just don't
• 使用 cf 类来包装 float 元素(而不是例如在您的情况下包含它们的页脚)
• 对于您以后的问题，如果您提供了所有相关代码，那就太好了，这样想要帮助您的人可以尽快重现(并最终找到解决方案)它。 (我必须在 css 中包含 clearfix)

希望这对您有所帮助。祝你好运!