как позиционировать эти элементы 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. Чтобы выровнять текст по углам поля и забыть о базовой линии. Я хотел бы выровнять 16 в верхнем левом углу и вырезать его в правом нижнем углу. Я ищу устранение всех пробелов в пикселях.
2. Чтобы переместить год под месяц, без указания точных значений ширины и высоты. Если я удаляю float: left, то он уходит под день. То, что я хотел бы иметь, должно переместить это право дня и под месяц. Нужно ли создавать другой div или spand на месяц + год?
3. Кроме того, похоже, что не имеет значения, если я удаляю display: block из диапазона CSS-es, почему это так?

Вот jsFiddle, который я создал: http://jsfiddle.net/ESbqY/3/

Обновление, основанное на предложении Колинка: http://jsfiddle.net/ESbqY/5/

Answer 1

Это, кажется, работает как требуется:

time span {
    display: block;
    font-size: 1em;
    margin-left: 2.5em;
}

time span.date-day {
    float: left;
    position: absolute;
    font-size: 2em;
    margin: 0;
}

.entry-meta {
    border: 2px solid #ccc;
    display: block;
    float: left;
    position: relative;
}

JS Fiddle demo .

<ч />

Отредактировано для изменения / использования цветов из вопроса и удаления (возможно нежелательного) поля между date-day и другими span элементами:

time span {
    display: block;
    font-size: 1em;
    margin-left: 2em;
}

time span.date-day {
    float: left;
    position: absolute;
    font-size: 2em;
    margin: 0;
    background-color: #444;
}

time span.date-month {
    background-color: #666;
}

time span.date-year {
    background-color: #888;
}

.entry-meta {
    border: 2px solid #ccc;
    display: block;
    float: left;
    position: relative;
    background-color: #ccc;
}

Демонстрация JS Fiddle .

Answer 2

Полностью настраиваемый:

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

Кроме того, вы можете добавить display: inline-block; к месяцу css, если вы хотите, чтобы div был такой же ширины, как текст внутри.

Answer 3

следующее:

<span style="font-size: 2em;">16</span><span style="display: inline-block;">Sep<br />2011</span>

Более или менее точно даст результат, показанный на изображении.