根据508法规(对于视障屏幕阅读器)，表格应该只用于保存数据，而不是用于布局，因为它会导致屏幕阅读器崩溃。至少别人是这么告诉我的。

如果您为每个div分配名称，您也可以使用CSS将它们一起蒙皮。只是让他们坐成你想要的样子有点麻烦。

布局的灵活性 想象一下，您正在创建一个带有大量缩略图的页面。 div: 如果你把每个缩略图放在DIV中，向左浮动，可能一行有10个缩略图。让窗口变窄，BAM -它是一行6个，或者2个，或者其他合适的。 表: 你必须明确地说一行中有多少单元格。如果窗口太窄，用户必须水平滚动。

可维护性 和上面的情况一样。现在要向第三行添加三个缩略图。 div: 把它们加进去。布局会自动调整。 表: 将新单元格粘贴到第三行。哦!现在那里的商品太多了。从那一行切一些，放在第四行。现在那里的商品太多了。从那一行切一些……(等) (当然，如果您使用服务器端脚本生成行和单元格，这可能不是问题。)

Flex有一个标签，用于在垂直列中布局内容。说实话，我不认为他们在布局/内容方面做得很好，但至少他们已经解决了这个问题。

像许多对CSS感到沮丧的人一样，我也到处寻找一个简单的答案，当我以为我找到了它时，我感到兴奋，然后当我在Chrome中打开页面时，我的希望破灭了。我肯定没有足够的技能说这是不可能的，但我还没有看到任何人提供样本代码供同行评审，明确地证明它可以可靠地完成。

那么，这个岛的CSS方面有人能推荐一种布局垂直列的心态/方法吗?我尝试过在第二行和第三行绝对定位，但我最终与到处重叠的东西和浮动有类似的问题，如果页面缩小。

如果这个问题有答案，我会欣喜若狂地做正确的事情——只要告诉我一些像“嘿，你试过**流:垂直|水平”这样的事情，我就完全不烦你了。

下面是我的程序员在一个类似的帖子中给出的答案

语义101

首先看一下这段代码，想想哪里出了问题……

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然，问题在于自行车不是汽车。car类对于bike实例是不合适的类。代码没有错误，但是语义不正确。这对程序员的形象很不利。

语义102

现在将此应用于文档标记。如果您的文档需要显示表格数据，那么适当的标记将是<table>。但是，如果将导航放在表中，则滥用了<table>元素的预期用途。在第二种情况下，您没有表示表格数据—您(mis)使用<table>元素来实现表示目标。

结论

游客会注意到吗?不。你的老板在乎吗?也许吧。作为程序员，我们有时会偷工减料吗?当然。但是我们应该吗?不。如果使用语义标记，谁会受益?你，还有你的职业声誉。现在去做正确的事吧。

围绕语义标记的整个思想是标记和表示的分离，其中包括布局。

Div并没有取代表，它们在将内容分离为相关内容块(，)方面有自己的用途。当您不具备这些技能并且依赖于表格时，您通常必须将内容分离到单元格中以获得所需的布局，但是在使用语义标记时，您不需要触摸标记来实现表示。在生成标记而不是静态页面时，这一点非常重要。

开发人员需要停止提供暗示布局的标记，以便我们这些拥有显示内容技能的人能够继续工作，并且开发人员不必在表示需要更改时返回他们的代码进行更改。

根据508法规(对于视障屏幕阅读器)，表格应该只用于保存数据，而不是用于布局，因为它会导致屏幕阅读器崩溃。至少别人是这么告诉我的。

如果您为每个div分配名称，您也可以使用CSS将它们一起蒙皮。只是让他们坐成你想要的样子有点麻烦。