css - 如何为div的底部实现 "clear"，而不仅仅是左右

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

---

编辑:Demo on jsfiddle