如何实现div底部的“清晰”，而不仅仅是左右

Question

我正在显示一个投票链接列表，类似于Hacker News。我想要每个链接的以下布局：

灰色框突出显示列出的每个链接的四个 div。

我需要做的关键是让“其他文本”div 与链接标题文本左对齐。

当然，我可以定义等级和箭头 div（两个小框）的宽度，然后相应地缩进另一个文本 div。但是这个实现相对于我的特定需求有一些缺点——我不会讨论——更重要的是，我觉得应该有一种更优雅的方式来实现这一点。类似于排名和箭头 div 的清晰底部，或者可能是链接标题 div 的属性，它告诉以下 div 直接出现在它的下方。

有任何想法吗？

Answer 1

为什么不把两个合适的容器合二为一呢？

<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
  <div class="row1">Link headline text</div>
  <div class="row2">other text</div>
</div>
<br class="clear" />

风格：

.rank, .arrow, .content {
  float: left;
}
.clear {
  clear: left;
}

编辑：jsfiddle 上的演示