1

私は次のものを持っています：

HTML:

<div class="banner-success"> 
    <span class="banner-text">
        You were successful! Yay! Some long reason what your success
        implies goes here.
    </span>
</div>

CSS:

/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
    background-position: 5px 5px;
    background-repeat: no-repeat;
    min-height: 42px;
    padding-left: 47px;
    margin-bottom: 10px;
}

/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
    color: #004400;
    background-color: #DDF2E4;
    background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/

.banner-text
{
    position: relative;
    top: 5px;
}

これにより、一貫した画像サイズを想定して、それぞれに画像と任意のテキスト行を含む標準バナーが可能になります。私の問題は、div 内のテキストが押し下げられていないかのようにサイズが変更されているため、テキストの一番下の行が div の外に出ていることです。

div、または任意のコンテナ要素に、「構成要素が相対的に配置された後、構成要素と同じ大きさになる」ように指示する方法はありますか?

4

1 に答える 1

0

overflow:hidden.banner-success に適用します。

テキストの周りのパディングを均等にするために、いくつかの微調整を行いました（そして、背景画像を下塗りして、画像が配置されていることを確認できるようにしました）：

http://jsfiddle.net/qTsgL/

乾杯！

于 2012-08-20T03:57:05.827 に答える