css - 如何在 CSS 中堆叠较小的文本？

Question

我的页面上有一点点文字：

我需要将月份（DEC）放在年份（2013）的顶部。我怎样才能用 CSS 做到这一点？

使用 BR 或浮点数似乎会导致各种疯狂的格式问题。显然，随着日期的变化，宽度也会变化，所以我无法将其锁定为固定宽度。

到目前为止我所拥有的：

html

<span class='month'>DEC</span><span class='year'>2013</span>

css

margin-left:20px;
position:relative;
top:-12px;
padding:12px 20px;
font-size:18px;
text-align:right;

Answer 1

检查这个，DEMO http://jsfiddle.net/yeyene/VPZgV/2/

HTML

<div class="day">
    <span class="date">31</span>
    <div class="mth_yr">
        <span class='month'>DEC</span>
        <span class='year'>2013</span>
    </div>
</div> 

CSS

.day{
    float:left;
    padding:10px;
    background:#F0EAE9;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.date{
    float:left;
    padding:8px 10px 2px 10px;
    border-right:3px solid #fff;
    font-size:30px;
    font-weight:bold;
    height:50px;
    background:#E9A3A0;
    color:#fff;
}
.mth_yr{
    float:left;
    width:35px;
    height:50px;
    padding:10px 10px 0px 10px;
    background:#E9A3A0;
    color:#fff;
}