难道使用"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,因为我希望列扩展和收缩可用空间.

请堆叠溢出,帮助我解决我对这些伪表的存在感恐惧感.

Answer 1

不使用表有两个基本参数:

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

所以,你的方法并没有真正违反这两个目标.但是,您应该在IE7和IE6中检查此代码 - 您可能会看到一些不一致的地方.

如前所述 - 不要担心坚持这些规则太紧.它们是指导方针,您应该使用正确的工具来完成您正在进行的工作.这里重要的是知道各种技术最适合什么,以及何时使用它们.有时,使用表格是您尝试做的最佳工具,有时则不是.

Answer 2

这是display: table-cell;为此设计的示例类型.毕竟,您将格式设置放在样式表中,而不是标记.太放松了!没关系.