具有平衡列高的CSS两列列表

Question

我想创建一个 2 列列表。

-----------------------------------
price         1.5
-----------------------------------
description   Some text about the
              product written here
              and will expand the 
              height of this column
-----------------------------------
availability  Yes
-----------------------------------
Feature       Some feature about
              the product 
-----------------------------------

我在每个 li 中使用带有 span 标记的列表来使信息内联。但问题是当信息变长时(如描述和特征)，列高不会增加，因此第二行的文本会被隐藏。

那么如何根据所写文本的数量使左侧栏与右侧栏的高度相同？

Answer 1

这个论点有点愚蠢......似乎没有人建议表格用于没有语义意义的布局，只是提供的示例数据是表格形式的，因此应该显示在表格中。所以我看不出发布关于表格布局的链接有什么意义，因为很明显参与这场辩论的每个人都在几年前就已经过去了。

正如 BalusC 所说，数据可以非常正确地显示在定义列表中。它当然会产生更优雅的标记，但它是否在语义上更正确是值得商榷的(显然，从这个讨论来看)。我知道没有任何表格数据的定义会阻止这种使用，包括 OED!因此，正如 prodigitalson 所说，为这些数据使用表格也是完全有效的。

Robert Grant - 您能否提供一个链接，将表定义为需要两个标签才能识别的数据？我不知道这个定义，但我愿意学习。尽管在 div 中使用 span 在语义上比表更有效，但我有点困惑。或者它是如何以任何方式语义化的。都是无意义的标签。

使用的标记必须建立键值对之间的关​​系。只有表或 dl 可以执行此操作。

表格的示例标记非常合理(顺便说一句，因为不需要 thead，tbody 标签也不是真正必需的，因为表格中没有其他元素可以区分)。除了标题之外，屏幕阅读器还需要标签上的 scope="row"。

说了这么多，这里的重点是帮助别人解决问题。该问题的性质往往表明 garj 不是高级前端开发人员，他们的 css 技能可能还没有达到最高标准。对我来说，这意味着最好使用表格解决方案。以一种在任何具有可观市场份额的浏览器中优雅地降级的方式设计 dl 无论如何都不是一项微不足道的任务。