Question

我试图制作一个Joomla模板，我的HTML和CSS代码有一个奇怪的问题。我有一个页脚与一些文本Joomla模块和一个img。当我尝试通过将位置设置为绝对位置并将右侧设置为0来将图像置于页脚的右侧时，我的页脚背景会消失。

我的HTML代码：

<footer>
    <p>some text</p>
    <p><jdoc:include type="modules" name="footer" /></p>
    <img src="<?php echo $templateDir;?>/images/footerBgR.png"/>
</footer>

我的CSS代码：

footer {
    width: 75%;
    position: relative;
    margin: 0px 10% 0px 10%;
    background: #292929;
    border-radius: 25px;
}

footer p {
    float: left;
    color: #fff;
    margin: 3px 0px 0px 10px;
}

footer img {
    position: absolute;
    right: 0px;
}

当我删除＆＃34; position：absolute;＆＃34;显示背景但图像不在我想要的位置。

Answer 1

你需要给页脚一个高度

footer {
    width: 75%;
    position: relative;
    margin: 0px 10% 0px 10%;
    background: #292929;
    border-radius: 25px;
    height:100px;
}

根据图像高度更改页脚高度。

jsFiddle File

你也可以通过这种方式做到这一点

将height: 100% and overflow: hidden提供给页脚并从图像中移除thr绝对位置并提供float: right

footer {
    width: 75%;
    position: relative;
    margin: 0px 10% 0px 10%;
    background: #292929;
    border-radius: 25px;
    height:100%;
    overflow:hidden;
}

footer img {
    float:right;
}

jsFiddle File

Answer 2

尝试将display: inline-block;或display: block;添加到您的图片中。

footer img {
    position: absolute;
    right: 0px;
    display: inline-block;
}

当儿童图像定位为绝对时，DIV背景消失

2 个答案: