html - 在行尾右对齐文本(不带表格)

Question

我花了一点时间试图弄清楚如何在不使用表格的情况下实现以下效果，但无法弄清楚:http://jsfiddle.net/sKFzA/

CSS:

.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}

HTML:

<table class="header">
<tr>
    <td class="titleCol">This is the blog title</td>
    <td class="dateCol"> <span>&nbsp;</span><span class="dateText">1/23/2012</span>

    </td>
</tr>
</table>

为了解释这一点，我有一个博客标题和一个博客日期。标题可以很长并且可以换行。在最后一行的末尾，无论是否换行，我希望博客日期向右对齐。

所以我有两个问题。有什么理由不为此使用表格吗？如果是这样，在不假设静态字体大小的情况下如何实现它？

Answer 1

CSS 具有允许任何元素表现得像表格的特定组件一样的属性。

http://cssdeck.com/labs/rjiesryc

<header>
  <h1>This is the blog title</h1>
  <time datetime="2012-01-23">1/23/2012</time>
</header>

CSS

 header {
      display: table;
      width: 100%;
    }

    header h1, header time {
      display: table-cell;
    }

    header time {
      /*vertical-align: bottom;*/
    }