html - 在 float div 上绘制的 CSS 边框

Question

在我正在制作的网站中，我添加了一个功能，即在主页顶部添加公告、小职员通知。我的想法是我有一个个人资料部分 float 到左侧，顶部有一个小日期线显示(当然)日期和一些标签。

问题出在日期线部分。日期线位于公告顶部个人资料的右侧。日期线有一个 border-bottom，这个边框一直延伸到公告上，绘制在 float 的 div 上。

我做了一个例子 fiddle here ，你可以看到问题。对于一些背景信息，所有公告都将位于 div.bulletin_frame 中，如果您愿意，可以称为“主 div”。其中将有 div.bulletin s。我对其进行了配置，除了第一个之外，它们的顶部都有一个实线边框，因此它们之间都有一个边框。 (查看样式表)

谢谢!

CSS:

div.bulletin_profile
{
    padding: 5px;
    margin-right: 5px;
    text-align: center;
    float: left;

    border-bottom: 1px gray solid;
    border-right: 1px gray solid;
    border-bottom-right-radius: 5px;
}
div.bulletin_dateline
{
    padding: 5px;
    font-family: monospace;
    border-bottom: 1px gray solid;
}
div.bulletin_body
{
    padding: 5px;
}

Answer 1

边框不是绘制在 div 上，而是在后面。分隔线根本没有背景。

要更改此设置，只需将背景添加到 .bulletin_profile:

div.bulletin_profile {
    background:rgb(240,240,240);
}