màu nền không hoạt động

Question

Im cố gắng áp dụng màu nền cho c_date khối toàn bộ .. nhưng nó không làm việc .. Tôi cố gắng rõ ràng, chặn tất cả mọi thứ ..

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 { 
    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 2

Điều này là do chiều cao c_date div của bạn là 2px (lý do là vị trí: tuyệt đối; trong các thùng chứa khác của bạn). Vì vậy, bạn có thể khắc phục nó bằng cách thêm chiều cao vào kiểu c_date hoặc thay đổi thuộc tính vị trí của các phần tử con trong đó.

Answer 3

Điều này thực sự có thể được thực hiện mà không cần đến số ngày position:absolute kéo dài cả ngày và tháng. Điều này có nghĩa là chiều cao của phần tử c_date của bạn thực sự liên quan đến chiều cao của các yếu tố ngày và tháng được xếp chồng lên nhau.

tôi lấy sự tự do sửa chữa lên một số mã CSS mà didnt cần phải có mặt ở đó từ bản demo của bạn quá :)

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