无法正确获得CSS布局

Question

此网站：http://dev.calffl.org

三个底部小部件框标记为test，test 2，test 3。

请注意该框如何向下延伸到页脚并以错误的方式覆盖页脚？

这需要消失，盒子应该是210px高，90px的叠加文字/透明度固定在底部。

我显然已经失去了理智。

Answer 1

你的.block有一个固定的高度，而它的子元素有更高的高度，因此溢出它的父级和包装器。

删除.block上的固定像素高度，并在其包装上设置浮点数：

.homepageBottomBox-widget-wrapper {
    margin: 0 auto;
    width: 100%;
    float: left;
}

然后网站包装也会效仿，虽然我不能100％确定你在透明度部分的样式上需要什么。但是我添加了一张图片，看看你是不是想要这么做。

Answer 2

通过以下方式改善透明度：

1. 将position:relative添加到您的widget_sp_image类（或只是窗口小部件类）
2. 将position:absolute;bottom:0px设置为您的widget_sp_image-description类。