css – 如何实现div的底部“清除”,而不仅仅是左右

我正在显示一个投票链接列表,类似于 Hacker News.我希望每个链接都有以下布局：

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

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

当然,我可以定义等级和箭头div(两个小框)的宽度,然后相应地缩进其他文本div.但是这个实现相对于我的具体需求有一些缺点 – 我不会涉及 – 更重要的是,我觉得应该有更优雅的方式来实现这一目标.类似于等级和箭头div的清晰底部,或者链接标题div的属性,它告诉下面的div直接出现在它下面.

有任何想法吗？

我将结合@Adam和@Czechnology给出的答案,并使用列表显示内容,并将Link标题文本和其他文本框放入单个父div中.像这样：

HTML：

<ol class="headlines">

  <li class="news-item">
    <div class="rank">9</div>
    <div class="arrow"><img src="arrow.png" /></div>
    <div class="content">
      <h2><a href="foo.html">Link headline text</a></h2>
      <div class="additional-content">other text</div>
    </div>
  </li>

  <li class="news-item">
    <div class="rank">10</div>
    <div class="arrow"><img src="arrow.png" /></div>
    <div class="content">
      <h2><a href="foo.html">Link headline text</a></h2>
      <div class="additional-content">other text</div>
    </div>
  </li>
</ol>

样式：

ol.headlines {
  display:block;
  list-style-type:none;
  list-style-position:outside;
  margin:0;
  padding:0;
}

div {
 border:1px solid #00F;
}


 ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
  float:left;
}

.news-item {
  clear:left;
}

ol.headlines h2,
ol.headlines .additional-content {
  display:block;
}

你可以在这里找到一个样本：http://jsfiddle.net/DEWtA/

请注意,您需要根据div的大小等方式更改CSS以满足您的需求.