使用带溢出的div构建一个长表。 （Twitter的自举）

Question

我正在尝试使用div构建一个表。表格应该很长，所以我必须使用溢出自动/隐藏。

结果为http://jsfiddle.net/gj7vm/

问题是，当我试图为.group div添加标题时，一切都突然中断（http://jsfiddle.net/ata5U/1/）。 （每个.group div应该包含其他div，就像表一样，但这里我只是从简单的.title div开始，它应该有固定的高度）

如何解决这个问题？ 还有，有什么类似于我正在尝试构建的东西的好例子（一个带溢出的长html表：hidden / auto）？

Answer 1

如果您正在尝试使用div构建表，为什么不使用CSS表显示值？它们会使你的div像表格一样。

这是CSS的一个例子：

div#screen {
  height: 120px;
  display: table;
}
#screen .row {
  display: table-row;
}
.group {
  width: 400px;
  height: 100px;
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  display: table-cell;
}

HTML：

<div id="screen" class="well well-large">
  <div class="row">
    <div class="group">
        <div class="group-title">foobar</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque.
    </div>
    <div class="group">
      <div class="group-title">foobar</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque.  </div>
    <div class="group">
      <div class="group-title">foobar</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque. 
    </div>
  </div>
</div>

这是一个小提琴：http://jsfiddle.net/8g8sW/1/

当你使用它们时，你不需要溢出：auto，因为div会像表格单元格那样运作并自动拉伸以适应它们的内容。

了解更多信息：http://www.vanseodesign.com/css/tables/

如果您不想使用CSS表格（例如浏览器支持），请说明，但它们似乎是最简单，最明显的选择。