Question

我有以下内容：

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或任何容器元素'与你的组成元素一样大，在他们相对定位你之后'？

Answer 1

将overflow:hidden应用于.banner-success。

我做了一些调整，以平衡文本周围的填充（并填充背景图像，所以你可以看到它工作与图像到位）：

http://jsfiddle.net/qTsgL/

干杯！

如何围绕相对子元素扩展HTML容器对象

1 个答案: