3

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

这是结果http://jsfiddle.net/gj7vm/

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

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

4

1 回答 1

3

如果你尝试用 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/

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

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

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

于 2013-03-23T17:50:46.940 回答