使用Div显示表格式数据

Question

我想显示如下数据:

 Title     Subject    Summary    Date

所以我HTML看起来像:

<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>

问题是,所有文本都不会出现在一行中.我尝试添加,display="block"但似乎没有用.

我在这做错了什么？

重要提示:在这种情况下,我不想使用table元素,但坚持使用div标签.

Answer 1

看起来你想要展示一张桌子,对吧？所以继续使用<table>标签.

Answer 2

我会使用以下标记:

<table>
  <tr>
    <th>Title</th>
    <th>Subject</th>
    <th>Summary</th>
    <th>Date</th>
  </tr>
  <!-- Data rows -->
</table>

另外要记住所有这些基于div和列表的布局,即使是指定固定宽度的布局,如果你有一些比宽度宽的文本(例如,一个url),布局将是打破.关于表格数据表的好处是它们实际上具有列的概念,而其他html构造没有.

即使这个网站有一些东西,比如头版,用div实现,我也会争辩说表格数据(如投票,回复,标题等)应该在表格中.推动div的人倾向于使用语义标记.你正在追求与此相反的观点.

Answer 3

我的意思并不是要光顾; 如果我这样做,我误解了你,我很抱歉.

大多数人对桌子不满,因为人们出于错误的原因使用它们.通常,人们使用巨大的桌子来定位他们网站中的内容. 这就是div应该用于什么.不是桌子!

但是,如果要显示表格数据,例如足球队列表,胜利,失败和关系,您绝对应该使用表格.为此使用div几乎闻所未闻(尽管并非不可能).

请记住,如果它是用于显示数据,你绝对可以使用表格!

Answer 4

如果有合理的理由不使用表格,那么你可以给每个div一个宽度然后浮动它.即

div.title {
    width: 150 px;
    float: left;
}

Answer 5

有没有理由不使用表格？如果您正在显示表格数据,最好使用表格 - 这就是它们的设计目标.

要回答你的问题,最好的方法可能是为每个元素分配一个固定的宽度,并设置float:left.你需要在末尾有一个虚拟元素,它具有clear:both,或者你必须清除:两者都在每一行的第一个元素上.这种方法仍然不是万无一失的,如果一个单元格的内容强制div更宽,它将不会调整整个列的大小,只调整该单元格的大小.您可以通过使用overflow:auto或overflow:hidden来避免调整大小,但这根本不像常规表那样工作.