CSS两个跨度与边框底部对齐，具有响应性

Question

这是我的代码：

<p class="section1comments">
<span class="jan">January 20 2011 by David LaHuta in <a href="">A Closer Look</a> </span>
<span class="comments">
<a href="">(1) Comments<sup><img src="slice/comment-icon.jpg" alt="" /></sup></a></span>

</p>

的CSS：

.section1comments, .section2comments {
    font-weight: bold;
    color: #747476;
    border-bottom: 1px solid #D4D4D4;
    padding-bottom: 5px;
    clear: both !important;
}

.section1comments
{
    width:100%;
}
.jan 
{
    width:79%;
}
.comments 
{
    width: 18%;
margin-left:15px;
}

调整窗口大小时，这两个跨度对齐无法正常工作。

有人可以帮我解决这个问题吗？

提前致谢，

Answer 1

给出以下css以获得预期结果。

span {
    display: inline-block;
}

它将占用父级的全宽。当您调整窗口大小时，comments span将显示在右侧。

<强> Fiddle

修改

另一种选择是使用display:table-cell来跨越元素，将display:table用于其父级。

span {
    display: table-cell;
}

<强> Updated Fiddle