css - 自动扩展带边框图像的 DIV

Question

我有一个 DIV，它的边框由图像组成。我想要做的是让这个 DIV 在内容不适合内容区域时自动扩展(仅在高度上)。否则它应该只使用最小高度。这是我的标记:

XHTML:

<div id="alerts">
    <div id="alerts-top"></div>
    <div id="alerts-left"></div>

    <div id="alerts-content">
        <div id="alerts-header">
            <p>Alerts</p>
        </div>

        <div id="alerts-main">
            <!-- content in here -->
        </div>
    </div>

    <div id="alerts-right"></div>
    <div id="alerts-bottom"></div>
</div>

CSS:

#alerts { float: left; width: 267px; height: 200px; }

#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }

#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }

#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }

这对我不起作用 - 底部边框与左右边框之间有间隙。内容区域是#alerts-main。

Answer 1

为 #alerts-bottom 试试这个:

#alerts #alerts-bottom {
    float: left;
    background: url(../images/alerts-bottom.png) no-repeat;
    height: 11px;
    width: 258px;
    margin-top: -9px;
}

如果 margin-top 属性为负值，您可以控制 div 的显示方式(在这种情况下，您将强制 #alerts-bottom div 在默认显示上方 9px 呈现。

希望对您有所帮助。