css - 如何在不定义高度和宽度的情况下定位这些 CSS 元素

Question

我正在尝试为网站上的时间元素创建一个小图形框。我想要的是这样的:

我有这个 HTML:

<div class="entry-meta">
    <time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
        <span class="date-day">16</span>
        <span class="date-month">Sep</span>
        <span class="date-year">2011</span>
    </time>
</div>

到目前为止这个 CSS:

.entry-meta {
    display: block;
    color: white;
    float: left;
    background: #aaa;
}

.date-day {
    display: block;
    font-size: 30px;
    background: #444;
    float: left;
}

.date-month {
    display: block;
    font-size: 12px;
    background: #666;
    float: left;
}

.date-year {
    display: block;
    font-size: 12px;
    background: #888;  
    float:left; 
}

我的问题是我无法实现两件事:

1. 将文本与框的 Angular 对齐而忘记基线。我想将 16 对齐到左上角并在右下角切割它的框。我正在寻找消除所有间距像素的方法。
2. 将年移动到月下，而不指定确切的宽度和高度属性。如果我删除 float: left 那么它就在白天。我想要的是将它移到当天和每月的右边。我是否需要为月 + 年创建其他 div 或 span？
3. 此外，如果我从 span CSS-es 中删除 display: block 似乎也没关系，为什么？

这是我创建的一个 jsFiddle: http://jsfiddle.net/ESbqY/3/

根据 Kolink 的建议更新: http://jsfiddle.net/ESbqY/5/

Answer 1

完全可定制:

http://jsfiddle.net/5MMc9/8/

html:

<div class="entry-meta">
    <time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
        <div class="date-day">16</div>
        <div class="container">
        <div class="date-month">Sep</div>
        <div class="date-year">2011</div>
        </div>
    </time>
</div>

CSS:

.entry-meta {position: relative; font-family: Trebuchet MS;}
.container {float: left;}
.date-day {font-size: 70px; line-height: 55px; float: left; background: #fa7d7d;}
.date-month {font-size: 25px; line-height: 25px; background: #627cc6; padding: 0 0 5px 0;}
.date-year {font-size: 25px; line-height: 25px; background: #3ce320;}

此外，如果您希望 div 与内部文本的宽度相同，则可以将 display: inline-block; 添加到月份 css。