使用Divs显示类似表格的数据
我想显示如下数据：
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标签。
解决方案
我们似乎要显示表格，对不对？因此，继续使用<table>标签。
有理由不使用表格吗？如果要显示表格数据，则最好使用为其设计的表。
要回答问题，最好的方法可能是为每个元素分配固定的宽度，然后设置float：left。我们需要在具有clear：both的末尾添加一个哑元素，或者在每行的第一个元素上都添加clear：both。此方法仍然不是万无一失的，如果一个单元格的内容迫使div变大，它将不会调整整个列的大小，仅调整该单元格的大小。我们也许可以通过使用overflow：auto或者overflow：hidden来避免调整大小，但这根本无法像常规表那样工作。
为了使文本显示在一行上，我们必须使用display =" inline"
此外，我们应该真正使用列表来达到此效果
<ul class="headers"> <li>Title</li> <li>Subject</li> <li>Summary</li> <li>Date</li> </ul>
样式如下所示：
.headers {padding：0; margin：0}
.headers li {display：inline; padding：0 10px} / padding将控制标题中文本两侧的空间/
如果有正当理由不使用表格，则可以为每个div赋予一个宽度，然后对其进行浮动。 IE。
div.title {
width: 150 px;
float: left;
}
我将使用以下标记：
<table>
<tr>
<th>Title</th>
<th>Subject</th>
<th>Summary</th>
<th>Date</th>
</tr>
<!-- Data rows -->
</table>
所有这些基于div和list的布局(甚至指定固定宽度的布局)要记住的另一件事是，如果我们有一些文本比宽度宽(例如url)，则布局将休息。关于表格数据表的好处是它们实际上具有列的概念，而其他html构造都没有。
即使该站点有某些东西(例如首页)是通过divs实现的，我也会认为表格数据(例如投票，回复，标题等)应该放在表中。推div的人倾向于这样做，以进行语义标记。我们正在追求相反的目标。
display：block保证元素不会出现在同一行上。浮动布局是滥用，就像布局表是滥用(但暂时是必需的滥用)一样。确保它们全部出现在同一行上的唯一方法是使用表格标记。 that或者display：inline，并且仅在元素和单词之间使用(非突破性空格)，而不是常规空格。这将防止自动换行。
但是，是的，如果没有正当理由避免使用表格，则将表格用于表格数据。那就是他们的目的。
我们需要确保所有"单元格"向左或者向右浮动(取决于它们的内部顺序)，并且它们还需要固定宽度。
另外，请确保其"行"具有固定的宽度，该宽度等于单元格宽度+边距+填充的总和。
最后，确保"表"级别div上有固定宽度，该宽度是行宽度+边距+填充的总和。
但是，如果要显示表格数据，则确实应该使用表格，某些浏览器(在上一代产品中更常见)对浮点，填充和边距的处理方式有所不同(还记得著名的IE 6 bug，它使页边距翻了一番吗？)。
关于何时使用和何时不使用表，这里还有很多其他问题，这可能有助于解释何时何地使用div和表。
或者实际上是这样，实际上是使用表格存储表格数据：
https://stackoverflow.com/badges
我的意思不是说光顾。如果这样做，我误会了我们，对不起。
大多数人不喜欢桌子，因为人们出于错误的原因使用它们。人们经常使用巨大的桌子在他们的网站上放置东西。这就是div应该用于的目的。不是桌子！
但是，如果要显示表格数据，例如足球队，获胜，失败和平局的列表，则绝对应该使用表格。使用div几乎是闻所未闻的(尽管并非不可能)。
请记住，如果它用于显示数据，则绝对可以使用表格！
只是为了说明先前答案的建议，敦促我们对表格数据使用table而不是div：
CSS Table画廊是一种以许多不同视觉样式显示漂亮表的好方法。
在CSS框架时代，我真的没有看到完全摆脱表格标记的意义。虽然现在可以对任何我们喜欢的元素执行" display：table- *"，但是table仍然是首选的标签，用于以表格形式格式化数据(不要忘记它在语义上更正确)。只需选择一种流行的CSS框架以使表格数据看起来不错，而不是破解<div>标签的表示来实现其设计目的。
display: block
肯定不会工作，尝试
display: inline
或者将所有内容浮动到左侧，然后相应地放置它们
但是如果我们有表格数据，那么最好在<table>标记中进行标记
一些参考：从站点
我们需要知道列的宽度我们需要知道列的数量我们需要知道列所占据的空间的宽度。我们需要确保空格不会溢出
我用DIV标签制作了一个日历，因为如果不对一个月中的最大周数进行硬编码，就不可能使XSL进行验证，这非常令人反感。
最大的问题是每个框的高度必须相同，如果我们希望将任何信息与带有div标签的表中的字段相关联，则必须确保whitespace：scroll或者whitespace：hidden在CSS中。
如果要水平堆叠div，则需要CSS属性float。
这是一个关于浮动的好教程：http://css.maxdesign.com.au/floatutorial/
前言：到目前为止，我对响应有些困惑，因为使用DIV和CSS进行列的编写已被很好地记录了下来，但是到目前为止，似乎没有任何响应涵盖了正常的工作方式。我们需要四个独立的DIVS，每个DIVS都有一个更大的" left："属性。我们将每列的数据添加到相应的DIV(列)中。
这是一个应该为我们提供帮助的网站。他们有许多使用CSS / DIV标签处理列的示例：
http://www.dynamicdrive.com/style/layouts/
我们要做的只是从他们的2列示例中推断出4列需求。
使用此代码：
<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>
我们有2个解决方案(为情况调整CSS选择器)：
1使用内联块
div
{
display: inline;
}
这将导致将块放置在同一行上，但删除我们可以控制其大小的控件。
2使用浮点数
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
堆栈溢出问题页面可以使用DIV的原因是，投票/答案计数器的宽度是固定的。
抱歉，但是，我要告诉我们使用表格。因为这是表格数据。
也许我们可以告诉我们为什么不想使用表格？
在我看来，我敢肯定对很多其他人来说，我们对"不要使用表"的想法感到困惑。它不是"不使用表"，而是"不使用表进行页面布局"。
我们在这里所做的是对表格数据进行布局，因此当然应该在表格中。
如果我们不清楚"表格数据"的概念，可以这样定义：单独从数据中并不清楚含义的数据位，必须通过查看标题来确定。
假设我们有火车或者巴士的时间表。这将是一个巨大的时代。特定时间是什么意思？我们无法通过查看时间本身来分辨，但只要参考行或者列标题，我们就会发现它是从某个测站出发的时间。
我们有文字字符串。它们是标题，摘要还是日期？人们会从检查列标题中得知这一点。这是一张桌子。
我们应该将span与：
display:inline-block
这将允许我们为每个元素设置宽度，同时仍将它们保持在同一行。
请参阅此处，特别是本节。
现在，为了安抚不满意的人，表格数据当然应该放在表中。但他非常具体地不想要一张桌子。以上是他的问题的答案！！！
表格数据也可以表示为嵌套列表，即列表列表：
<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>
我们可以像表格一样进行布局，并且在语义上也是正确的。
