背景颜色不起作用

Question

我试图为整个块c_date应用背景颜色..但它不起作用..我试过清除，阻止一切..

Demo

HTML：

<div class="c_date"> <span class="c_day">30</span>
 <span class="c_month">Jun</span>
 <span class="c_year">2009</span>
    <div style="clear:both;"></div>    
</div>

CSS：

.c_date {
    position: relative;
    width: 40px;
    color: #999;
    margin: -0px 0 0 0;
    background:#999 !important;
    display:block;
    border:1px solid #ccc;
    clear:both;
}
.c_day, .c_month, .c_year {
    position: absolute;
}
.c_day {
    font-size: 14px;
    top: 10px;
}
.c_month {
    top: 0;
    left: 0;
    font-size: 11px;
}
.c_year {
    top: 9px;
    right: 0;
    font-size: 9px;
    rotation: -90deg !important;
    /* ** Hacks ** */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

Answer 1

这是因为你的c_date div高度是2px （原因是position：absolute;在你的其他容器中）。 因此，您可以通过向c_date样式添加高度或更改其中子元素的位置属性来修复它。

Answer 2

.c_date {
    position: relative;
    width: 40px;
    color: #999;
    margin: -0px 0 0 0;
    background-color: #999 !important;
    display:block;
    border:1px solid #ccc;
    clear:both;
    height: 30px; //change to your needs

}

Answer 3

这实际上可以在不需要position:absolute日期和月份的情况下完成。这意味着c_date元素的高度实际上相对于堆积的日期和月份元素的高度。

我冒昧地修复了一些不需要在你的演示中出现的CSS代码：）

<强> HTML

<div class="c_date">
    <span class="c_month">Jun</span><br />
    <span class="c_day">30</span>
    <span class="c_year">2009</span>
</div>

<强> CSS

.c_date {
    position: relative;
    width: 40px;
    color: #999;
    margin: 0 0 0 0;
    background:#00F !important;
    display:block;
    border:1px solid #ccc;
    font-size:0; /* set to 0 so that <br/> and spaces between <span> dont effect height/spacing */
}
.c_year {
    position: absolute;
}
.c_day {
    font-size: 14px;
    display: inline-block;
    line-height: 11px;
    padding-bottom: 2px;
    text-align:center;
}
.c_month {
    font-size: 11px;
    display: inline-block;
    line-height: 14px;
    text-align:center;
}
.c_year {
    top: 9px;
    right: 0;
    font-size: 9px;
    /* ** Hacks ** */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

<强> DEMO