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

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

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

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

我认为没有人会在意一个网站是如何设计/实现的，当它运行得很好并且运行得很快的时候。

我在HTML标记中同时使用“table”和“div”/“span”标记。

让我给你一些我为什么选择跳水的理由:

for a table you have to write at least 3 tags (table, tr, td, thead, tbody), for a nice design, sometimes you have a lot of nested tables I like to have components on the page. I don't know how to explain exactly but will try. Suppose you need a logo and this have to be placed, just a small piece of it, over the next page content. Using tables you have to cut 2 images and put this into 2 different TDs. Using DIVs you can have a simple CSS to arange it as you want. Which solution do you like best? when more then 3 nested tables for doing something I am thinking to redesign it using DIVs

但是我仍然在使用表格:

表格数据 扩展自我的内容 快速解决方案(原型)，因为DIVs盒子模型在每个浏览器上是不同的，因为许多生成器使用表格等

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

语义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>元素来实现表示目标。

结论

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

将内容与布局分开是很好的 但这是一个错误的论点;陈词滥调的思考

这是一个错误的论点，因为HTML表格是布局!内容是表中的数据，表示是表本身。这就是为什么从HTML中分离CSS有时会非常困难。您不是将内容与表示分开，而是将表示与表示分开!一堆嵌套的div和一个表没有什么不同——它只是一组不同的标签。

把HTML和CSS分开的另一个问题是，它们需要彼此的密切了解——你真的不能把它们完全分开。无论您做什么，HTML中的标记布局都与CSS文件紧密耦合。

我认为表与div的区别取决于应用程序的需要。

在我们在工作中开发的应用程序中，我们需要一个页面布局，其中各个块将动态地调整自己的大小以适应其内容。我花了几天时间试图让它与CSS和div跨浏览器工作，这是一个完全的噩梦。我们换了桌子，一切都很顺利。

然而，我们的产品有一个非常封闭的受众(我们销售的是带有web界面的硬件)，可访问性问题不是我们关心的问题。我不知道为什么屏幕阅读器不能很好地处理表格，但我猜如果这是开发人员必须处理的方式。

如果你在这方面支持表格角度，找一个有表格的网站，然后给自己买一个屏幕阅读器——关掉屏幕阅读器，关掉你的显示器。

然后尝试一个不错的语义正确的div布局网站。

你会发现其中的不同。

如果表格中的数据是表格而不是为了布局页面，那么表格并不是邪恶的。

显而易见的答案:参见CSS Zen Garden。如果你告诉我你可以很容易地用基于表格的布局做同样的事情(记住- HTML没有改变)，那么无论如何都要使用表格来布局。

另外两个重要的事情是可访问性和搜索引擎优化。

两者都关心信息以何种顺序呈现。如果基于表格的布局将导航放在页面上第二个嵌套表格的第2行的第3个单元格中，则无法轻松地将导航显示在页面顶部。

所以你的答案是可维护性，可访问性和SEO。

不要偷懒。即使事情有点难学，也要用正确的方式去做。