Question

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

final

我有这个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; 
}

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

将文本与框的角对齐，忘记基线。我想将16对齐左上角并在右下角剪切它的框。我正在寻找消除所有间距像素。
要移动月份以下的年份，而不指定确切的宽度和高度属性。如果我删除浮动：左，那么它会在一天之内。我想拥有的是在一天和一个月之内移动它。我是否需要为月份+年创建其他div或spand？
此外，如果我从跨度CSS中移除display: block似乎没关系，为什么会这样？

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

ver3

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

ver5

Answer 1

以下内容：

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

将或多或少准确地生成图像中显示的结果。

Answer 2

这似乎可以按要求运作：

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 demo

Answer 3

完全可定制：

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。

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

3 个答案: