html - 使用 "display: table;"将布局组织成 2 列不好吗？

Question

我正在尝试制作一个 2 列布局，这显然是 CSS 的祸根。我知道您不应该使用表格进行布局，但我已经决定使用此 CSS。注意display:table等的使用

div.container {
  width: 600px; height: 300px; margin: auto;
  display: table; table-layout: fixed;
  }

ul {
  white-space: nowrap; overflow: hidden;
  display: table-cell;
  width: 40%;
  }

div.inner {
  display: table-cell;
  width: auto;
  }

使用这种布局:

<div class="container">

  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    </ul>

  <div class="inner">
    <p>Hello world</p>
    </div>

  </div>

这看起来效果很好。然而，我不禁想知道——我是在遵守“不要使用表格”规则的字面意思，而不是精神上的吗？我认为没关系，因为 HTML 代码中没有定位标记，但我只是不确定“正确”的方法。

我不能使用 css float，因为我希望列随可用空间扩展和收缩。

求求你，stack overflow，帮助我解决我对这些伪表的恐惧感。

Answer 1

不使用表格有两个基本论据:

1. 语义标记。
2. 避免标签汤。 (标签太多)

因此，您的方法并没有真正违反这两个目标中的任何一个。但是，您应该在 IE7 和 IE6 中检查此代码 - 您可能会在那里看到一些不一致之处。

如前所述 - 不要担心过于严格地遵守这些规则。它们是指南，您应该为您正在做的工作使用正确的工具。这里重要的是了解各种技术的最佳用途以及何时使用它们。有时，使用表格是完成您要做的事情的最佳工具，有时则不然。