使用“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 浮动，因为我希望列随着可用空间扩展和收缩。

请堆栈溢出，帮助我解决我对这些伪表的存在恐惧感。

Answer 1

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

1. 语义标记。
2. 避免标签汤。 （标签太多）

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

如前所述 - 不必担心过于严格地遵守这些规则。它们是指导方针，你应该为你正在做的工作使用正确的工具。这里重要的是知道各种技术最适合什么，以及何时使用它们。有时，使用表格是您想要做的最好的工具，有时则不是。

Answer 2

这是 display: table-cell; 设计的示例类型。毕竟，您是将格式放入样式表，而不是标记。所以放松！没关系。

Answer 3

如果所有可能的布局都可以用 css 完成，而且看不到表格或伪表格，那就太好了。但也有例外，在 html 和 css（以及浏览器支持）让我们这样做之前，请对您的表格感到满意。毕竟，关键是要满足您的用户，而不是遵循别人的理念。

Answer 4

在 HTML 中为非表格数据使用表格标签的问题在于，它们在应该只是数据的内容中强加了格式。

由于您将表格格式放入 CSS 中，因此您的 HTML 在语义上仍然是正确的。我的观点是，只要你的 HTML 在语义上是正确的，你在 CSS 中所做的让它看起来漂亮是你自己的事，我认为你对存在的恐惧是错误的。

顺便说一句，我很确定 IE 6 不支持 display:table-cell，因此根据您的目标，您可能需要做出其他安排。

Answer 5

在谈论语义时，使用 display:table 很好。 “表格不好”的原因首先是因为标记（HTML）应该描述其中的内容。因此，如果它不是数据，则它不属于表。

由于您只是在设置标记的显示方式（在表格结构中），这非常好。

但是，这不适用于所有浏览器。特别是 IE6 和 IE7（以及“兼容模式”下的 IE8）将无法正确显示。

有关显示类型和浏览器支持的更多信息，您可以参考：http://www.quirksmode.org/css/display.html

Answer 6

你说使用display:table 来获得像列一样的自动宽度？

我不能使用 css 浮点数，因为我希望列展开并且 与可用空间签订合同。

然后，您也可以使用 flex 属性！让我们开始吧：

在 CSS3 中添加了许多属性，其中有一个 group 称为 flex，用于在不使用表格或 display: table 的情况下拥有灵活的 div；当用户使用小屏幕（可能是迷你笔记本电脑、平板电脑、Galaxy 系列等大型智能手机或小型...？）时也使用。这些是属性：

• 家长。
  • 这是主容器。例如，假设您有一个具有非常基本的 HTML 结构和三个 div（一个用于主要信息，另一个用作侧边栏，最后一个用于包装提到的前两个）的网络。
  • display: flex：这用于告诉浏览器我们正在谈论灵活的项目。在值之前使用-webkit-（inline-flex 也适用）以获得 Google 和 Safari 支持。您不需要使用-moz- 或-o-，也不需要使用-ms-。
  • flex-direction：这是父级中子级的方向。该值有四个可用值：row、column、row-reverse 或 column-reverse。因为你想要一个主 div 和一个侧边栏，所以你应该使用 column。使用 -moz- 和 -webkit- 获得更多浏览器支持。
  • justify-content：X 轴的对齐方式。值：flex-start、flex-end、space-between、space-around、flex-center。我建议使用第四个或第五个。
• 儿童。
  • 对于这种情况，我的意思是将孩子称为main（不推荐）或div class="main" 和aside 或div class="sidebar"。
  • order：用于对 div 进行排序，无论哪个在代码中放在首位。在这里，CSS 战胜了所使用的 HTML 代码。这些值是...数字...请使用-moz- n -webkit- plz。
  • flex-grow：用于让一个孩子比其他孩子大，这取决于它的值，以及该属性是否有其他孩子具有其他值。 -webkit- & -moz- r Rcomment ed.

Moar 信息位于：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 和 http://www.w3schools.com/cssref/default.asp#flexible。

哦，答案是：是的，您可以使用它。阅读：http://www.w3.org/TR/css3-flexbox/#intro。它说

表格布局，用于以表格格式布置二维数据

他们不会谈论坏主意，它只是将其格式设置为 ACT（并且可能看起来不像），就像一张桌子。

Answer 7

具有讽刺意味的是，使用display: table 很可能是未来普遍接受的解决方案。

见：http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Answer 8

display: table-cell

是一种样式，而不是这样的表结构：

<table>
   <tbody>
       <tr>
          <td>
          </td>
       </tr>
   </tbody>
</table>

所以我觉得用起来也不错。

顺便说一句，我不认为桌子真的很邪恶。

我个人更喜欢显示表格数据的表格（仅用于数据）而不是“div”结构。我的主要原因是，用户可以轻松地将数据从浏览器复制粘贴到电子表格。满足我的懒惰：>并减少页面加载（通过不以“下载为excel，或csv或其他”为特色）......呵呵呵呵......：D。 哦，另外，在不同的浏览器中它的显示也是一致的。

Answer 9

让我把它分解给你。 element 有它的魅力，这就是每个人都使用它的原因。但随后语义开始发展。我们在语法方面做得很好。做出了决定，代表 XHTML 2.0 被丢弃，而 HTML5 被采用。阅读 WHATWG（Web 超文本应用技术工作组）的历史，让您的概念更加清晰。

从 HTML 中删除某些元素的主要立场是，它们不是用来构造事物的，而是用来为它们设置样式的，而 HTML 与设置元素的样式无关。

HTML 旨在构建网页。 CSS 旨在为该结构设置样式。

因此，从规范中删除了 HTML 元素和许多其他元素。它们专门用于样式而不是结构化。

为了决定元素的命运，决定将其保留在规范中，因为在真实表格中意味着要使用它来构建，但是为了转移普通网页设计师的关注点，应该将类似的能力/规范添加到 CSS .

现在 HTML 元素仅用于表格的结构，仅此而已。 如果您想使用表格进行样式设置，请继续使用 display:table;这是一个 CSS 属性，CSS 旨在为 HTML 中结构的元素设置样式。除此之外，它可以被修改和控制。在 RWD 中，您可以指定任何元素以将其显示从表格更改为块或其他。