是不是使用“display：table;”将布局组织成2列？ [英] Is it bad use "display: table;" to organise a layout into 2 columns?

问题描述

我想做一个2列布局，显然是CSS的诅咒。我知道你不应该使用表格布局，但我已经解决了这个CSS。注意使用display：table等。

I am trying to make a 2 column layout, apparently the bane of CSS. I know you shouldn't use tables for layout, but I've settled on this CSS. Note the use of display: table etc.

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代码中没有定位标记，但我只是不知道正确的方式来做。

This seems to work admirably. However, I can't help wondering - am I obeying the letter of the "don't use tables" rule, but not the spirit? I think it's ok, since there's no positioning markup in the HTML code, but I'm just not sure about the "right" way to do it.

我可以' t使用css float，因为我想要列扩展和与可用空间收缩。

I can't use css float, because I want the columns to expand and contract with the available space.

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

Please, stack overflow, help me resolve my existential sense of dread at these pseudo-tables.

推荐答案

不使用表格有两个基本参数：

There are two essential arguments for not using tables:

1. 语义标记。


2. 避免标签汤。 （太多标签）

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

So, your method is not really violating either of those goals. However, you should check this code in IE7 and IE6 - you are likely to see some inconsistencies there.

如前所述 - 不必担心遵守这些规则紧紧。他们是指南，你应该使用正确的工具，你正在做的工作。这里重要的是知道什么是各种技术是最好的，什么时候使用它们。有时，使用表格是您尝试做的最好的工具，有时不是。

As was mentioned - don't worry about sticking to these rules too tightly. They are guidelines, and you should use the right tool for the job you are doing. What is important here is knowing what the various techniques are best for, and when to use them. Sometimes, using a table is the best tool for what you are trying to do, sometimes it is not.

这篇关于是不是使用“display：table;”将布局组织成2列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！