Question

我的容器内有四根柱子。它需要在容器内部与上面的内容对齐。

我的问题是我希望左栏的背景为红色，但目前它不会拉伸，因为它显然位于容器中。

如何将其全宽度向左拉伸，同时保持其与上面的内容对齐。

<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

将容器类宽度设置为100％

.container {
    width: 100%;
    margin: 0 auto;
}

Answer 2

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

使用伪元素:before（使用:nth-of-type(1)分配给第一个页脚列），我们将用它来创建相同的红色背景以放置在第一列的左侧
将:before元素定位到position: absolute;，以便使用left: 0;将红色背景放在最后定位元素的左边缘
现在我们的:before元素相对于最近的祖先位置 - 在我们的例子中是html元素本身。但我们希望它相对于尚未定位的页脚定位，我们使用position: relative;对其进行定位（更多内容here）
添加content: " "; height: 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类仅包装浮动元素（例如，不包括在您的情况下包含它们的页脚）
对于您未来的问题，如果您提供了所有相关代码，那就太棒了，所以想要帮助您的人可以尽快复制（并最终找到解决方案）。（我必须将clearfix包含在css中）

希望这会有所帮助。祝你好运！

页脚列strech - 使列背景拉伸全宽

2 个答案: