html - WordPress Twenty Twelve 主题中页脚内的样式小部件

Question

我正在使用 WordPress 的二十十二主题。我在页脚中添加了三个小部件列，基于 this tutorial ，其中包含您可能需要查看的所有代码。

唯一使用的额外 css:

#colophon {
background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;
background-color: #00A0E1;
color: white;
padding: 115px 0 0 100px;
margin-bottom:20px;
}

网站链接:http://lenkapage.com/daylight

结果是一个带有 Logo (根据需要)的蓝色矩形，小部件位于其下方。我希望 Logo 和小部件组成一个页脚 block 。如何让小部件包含在蓝色背景中？

一个选项是忘记#colophon 并为小部件本身设置样式，但这并不理想，因为它在调整屏幕大小时和其他问题时会受到不愉快的影响。造型不适合我。

由于小部件位于代码中的#colophon 内，我试过定位(相对等)，但这没有达到预期的效果。我的直觉是这就是答案所在。到目前为止没有雪茄。

我在 wordpress.org、google 和 stack overflow 上搜索了很少和很多搜索词，但大部分得到的答案都是关于如何在页脚上实现三个小部件区域。

非常感谢!

Answer 1

将溢出添加到您的#colophon。这当然可行，但您始终可以对此元素使用 clearfix。

#colophon {    background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;    background-color: #00A0E1;    color: white;    padding: 115px 0 0 100px;    margin-bottom: 20px;    overflow: hidden;}