背景顏色不工作

我試着去申請的背景顏色爲整個塊c_date ..但它不工作。我試着清除，阻止一切..背景顏色不工作

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); 
}

來源

2014-08-28 G.L.P

您的'c_date'塊的渲染高度爲2px。你需要清理你的標記，嘗試添加一些高度（比如50像素），你會看到背景顏色。 – 2014-08-28 06:41:10

這是因爲對.c_day，.c_month，.c_year使用絕對位置，如果爲c_date添加高度，每件事都可以。 – 2014-08-28 06:41:35

您正在span元素上使用'position：absolute'。這需要他們註冊爲影響父'div'的元素 – haxxxton 2014-08-28 06:41:50

.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 

}

來源

2014-08-28 06:43:02 RST

這是因爲您的c_date div高度爲2px enter image description here （原因是position：absolute;在你的其他容器中）。因此，您可以通過將高度添加到c_date樣式或更改其中的子元素的位置屬性來修復它。

來源

2014-08-28 06:43:38

**'+ 1' **我認爲你也應該寫一個答案。 – dashtinejad 2014-08-28 06:55:27

這實際上可以在不需要position:absolute的日期和月份範圍內完成。這意味着您的c_date元素的高度實際上是相對於堆積的日期和月份元素的高度。

我把固定了一些CSS代碼的自由是didnt需要從您的演示太:)

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

來源

2014-08-28 06:51:58 haxxxton

背景顏色不工作

回答

相關問題