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

看起来你想要展示一张桌子，对吧？所以继续使用＆lt; table＆gt;标签

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来避免调整大小，但这根本不会像常规表一样工作。

Answer 6

抱歉，我会告诉你使用表格。因为这是表格数据。

也许您可以告诉我们为什么不想要使用表格？

在我看来，我相信其他很多人，你对“不使用表格”的想法感到困惑。它不是“不使用表”，而是“不使用表格进行页面布局”。

你在这里做的是列出表格数据，所以当然应该在表格中。

如果您不清楚“表格数据”的概念，我将其定义如下：数据位的含义不仅仅来自数据，还必须通过查看标题来确定。

假设您有火车或公共汽车时刻表。这将是一个巨大的障碍。什么特定时间意味着什么？你无法看到时间本身，但参考行或列标题，你会看到它离开某个站的时间。

你有一串文字。它们是标题，摘要还是日期？人们会通过检查列标题来说明这一点。所以这是一张桌子。

Answer 7

或者确实如此，这非常使用表格来表格数据： https://stackoverflow.com/badges

Answer 8

只是为了说明以前答案的评论，敦促您使用表而不是div来表示表格数据：

CSS Table gallery 是在许多不同视觉风格中展示精美表格的绝佳方式。

Answer 9

在CSS框架时代，我真的没有看到完全偏离表标签的观点。虽然现在可以为您喜欢的任何元素执行display: table-*，但table仍然是以表格形式格式化数据的首选标记（不要忘记它在语义上更正确）。只需选择一个流行的CSS框架，使表格数据看起来不错，而不是黑客攻击<div>标签的演示文稿，以实现其不适合的任何目标。

display: block

肯定不行，试试

display: inline

或将所有内容浮动到左侧，然后相应地定位

但是如果您有表格数据，那么最好在<table>代码

中进行标记

一些参考：from sitepoint

Answer 10

如果你想水平堆叠div，那么CSS属性float就是你要找的东西。

这是关于花车的好教程：http://css.maxdesign.com.au/floatutorial/

Answer 11

显示：阻止元素将不出现在同一行上的garauntees。浮动布局是滥用，就像表格布局是滥用（但暂时，这是必要的滥用）。让他们全都出现在同一条线上的唯一方法是使用表格标签。那，或显示：内联，仅使用＆amp; nbsp;元素和单词之间的（非中断空格），而不是普通空格。＆amp; nbsp;将帮助您防止自动换行。

但是，如果没有合法的理由避免使用表格，请使用表格作为表格数据。这就是他们的目的。

Answer 12

您需要确保所有“单元格”向左或向右浮动（取决于它们的内部顺序），并且它们还需要固定宽度。

另外，请确保其“行”的固定宽度等于单元格宽度+边距+填充的总和。

最后确保“table”级别div上有一个固定的宽度，即行宽+边距+填充的总和。

但是如果你想显示表格数据，你真的应该使用一个表，一些浏览器（比上一代更常见）处理浮点数，填充和边距不同（还记得着名的IE 6错误，它使保证金加倍吗？）。

关于何时使用以及何时不使用可能有助于解释何时何地使用div和表格的表格，还有很多其他问题。

Answer 13

使用此代码：

<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>

您有2个解决方案（根据您的情况调整css选择器）：

1 - 使用内嵌块

div 
{
    display: inline;
}

这将导致将块放在同一行上，但删除对其大小的控制。

2 - 使用float

div 
{
    width: 15%; /* size of each column : adapt */
    float: left; /* this make the block float at the left of the next one */
}

div.last_element /* last_element must be a class of the last div of your line */
{
   clear: right; /* prevent your the next line to jump on the previous one */
}

float属性对于CSS定位非常有用：http://www.w3schools.com/css/pr_class_float.asp

Answer 14

堆栈溢出的问题页面可以使用DIV的原因是因为投票/答案计数器是固定宽度。

Answer 15

表格数据也可以表示为嵌套列表 - 即列表列表：

<ul>
    <li>
        heading 1
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
    <li>
        heading 2
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
</ul>

您可以像表格一样进行布局，并且在语义上也是正确的（ish）。

Answer 16

前一段时间我问了一个类似的问题Calendar in HTML，每个人都告诉我也要使用表格。

如果你已经制作了一个igoogle主页，只需交换他们的代码即可。我在页面的列中创建了一个列和列的系统。请注意，谷歌不能拥有无限数量的列，这会冒犯我们作为对象的敏感度。以下是我的一些发现：

您需要知道列的宽度
您需要知道列数
你需要知道列所居住的空间的宽度。
您需要确保空格不会溢出

我使用DIV标签创建了一个日历，因为如果没有硬编码本月的最大周数，非常冒犯，就不可能让XSL验证。

<小时/> 最大的问题是每个框必须具有相同的高度，如果您希望任何信息与表格中包含div标签的字段相关联，您必须确保whitespace:scroll或{{1}在你的CSS中。

Answer 17

前言：到目前为止，我对这些响应感到有些困惑，因为使用DIV和CSS做列很好，但它看起来并不像迄今为止所做的任何响应一样。你需要的是四个独立的DIVS，每个DIVS都有一个更大的“left：”属性。您将每列的数据添加到相应的DIV（列）中。

这是一个应该帮助你的网站。他们有很多用CSS / DIV标签做列的例子： http://www.dynamicdrive.com/style/layouts/

您所要做的就是从他们的2栏示例推断出您的4栏需求。

Answer 18

要使文字显示在一行中，您必须使用display =“inline”

此外，您应该使用列表来实现此效果

<ul class="headers">
  <li>Title</li>
  <li>Subject</li>
  <li>Summary</li>
  <li>Date</li>
</ul>

样式如下：

.headers {填充：0;余量：0}

.headers li {display：inline; padding：0 10px} / 填充将控制标题文本两侧的空间 /

Answer 19

您应该使用跨度：

display:inline-block

这将允许您为每个元素设置宽度，同时仍将它们保持在同一条线上。请参阅here，具体为this section。

现在，为了安抚downvoters - 当然表格数据应该在表格中。但他非常特别不想要一张桌子。以上是他的问题的答案!!!

Answer 20

首先display:block应为display:inline-block，尽管您可能已经弄明白了。其次，您还可以使用display:table，display:table-cell，display:table-row和其他属性。虽然这些不如使用表格那么好。

使用Div显示表格式数据

20 个答案: