2

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;
}

「position：absolute;」を削除すると 背景は表示されますが、画像が必要な場所にありません。

4

2 に答える 2

2

フッターに高さを与える必要があります

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

画像の高さに応じてフッターの高さを変更します。

jsFiddle ファイル

この方法でもこれを行うことができます

height: 100% and overflow: hiddenフッターに与え、画像から絶対位置を削除して与える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 ファイル

于 2013-07-22T05:29:45.403 に答える