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

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

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

我的问题是我不能做到两件事：

将文本与框的角对齐并忽略基线。我想将16对齐到左上角，并在右下角剪切它的长方体。我正在寻找消除所有的间距像素

在不指定确切的宽度和高度属性的情况下，将年份移动到月份下。如果我删除float:left，那么它就在day下。我想要的是把它移到今天的右边，在这个月的下面。我是否需要为月份+年份创建其他div或spand

此外，如果我从span CSS es中删除

display:block

，似乎也没什么关系。为什么

下面是我创建的一个JSFIDLE：

基于Kolink建议的更新版本：

以下内容：

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

2011年9月16日

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

以下内容：

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

2011年9月16日

---

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

这似乎按要求工作：

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

---

编辑以修改/使用问题中的颜色，并删除

日期

和其他

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

---

.

这似乎按要求工作：

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

---

编辑以修改/使用问题中的颜色，并删除

日期

和其他

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

.

完全可定制：

html:

此外，还可以添加

display:inline块编码到月份css。
完全可自定义：


html:

此外，还可以添加
display:inline块改为month css。
我做了您建议的更改，这里有一个JSFiddle：我认为这种方式很难相对定位月份和年份。还有，由于基线对齐，我如何去除文本周围的像素？你似乎没有做我建议的更改…-这不是你想要的吗？对不起，我忘了将版本更新为5，现在已经更新了。我想将16对齐到左上角，并在右下角剪切它的长方体。还有其他因素。我不明白你说的“切盒子”是什么意思。我发布的答案有什么问题，你需要把它复杂化？我已经用彩色背景更新了顶部的图片，来解释我所说的“切割它的盒子”是什么意思在CSS中，是否可以将块级元素剪切为其内部文本的维度？我做了您建议的更改，下面是一个JSFIDLE：我认为这种方式很难相对定位月份和年份。还有，由于基线对齐，我如何去除文本周围的像素？你似乎没有做我建议的更改…-这不是你想要的吗？对不起，我忘了将版本更新为5，现在已经更新了。我想将16对齐到左上角，并在右下角剪切它的长方体。还有其他因素。我不明白你说的“切盒子”是什么意思。我发布的答案有什么问题，你需要把它复杂化？我已经用彩色背景更新了顶部的图片，来解释我所说的“切割它的盒子”是什么意思在CSS中，是否可以将块级元素剪切到其内部文本的维度？定义维度有什么问题？例如，因为日期非常大，29大于1。定义维度有什么问题？例如，因为日期非常大，29大于1。谢谢。我对此只有两个问题。1.如果它只是一个位数而不是16呢。例如1：同样，在CSS中是否可以忽略字体的垂直间距？我用颜色更新了第一个示例以进行解释。另外，请随意使用您喜欢的HTML，上面的草图正是我的想法。这一点很好（我总是这样想，所以我没有想到……否则，我想您正在考虑使用的要求，不幸的是（我还添加了
text align:center
，以减少日数和月/年
span
s之间的空白）。谢谢。我对此只有两个问题。1.如果它只是一个数字而不是16会怎么样。例如1：另外，在CSS中是否可以忽略字体的垂直间距？我用颜色更新了第一个示例以进行解释。另外，请随意使用您喜欢的HTML，上面的草图正是我的想法。观点很好（我总是这样，所以我没有想到这一点……否则，我猜您正在考虑使用的要求，不幸的是（我还添加了
text align:center
，以减少日数和月/年
span
s之间的空白）.非常感谢！在过去的几个小时里，我提出了相同的解决方案，即最好插入另一个div。行距技巧非常好，我开始使用负边距。顺便说一句，为什么位置：relative在那里？我看不出有什么意义。是的，关于位置，你是对的。我只是在进行测试时忘了删除它。这是一个错误一个很好的小练习。干杯！非常感谢！在过去的几个小时里，我想出了相同的解决方案，即最好插入另一个div。线条高度技巧非常好，我开始使用负边距。顺便说一句，为什么位置：relative在那里？我看不出有什么意义。是的，关于位置，你是对的。我只是忘了删除这是一个很好的小练习。干杯