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

hnrainll 阅读:766 2023-11-05 18:46:41 评论:0

我正在尝试制作一个 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,帮助我解决我对这些伪表的恐惧感。

请您参考如下方法:

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

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

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

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


标签:程序员
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们