html之使用 "display: table;"将布局组织成 2 列不好吗
我正在尝试制作一个 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,帮助我解决我对这些伪表的恐惧感。
请您参考如下方法:
不使用表格有两个基本论据:
- 语义标记。
- 避免标签汤。 (标签太多)
因此,您的方法并没有真正违反这两个目标中的任何一个。但是,您应该在 IE7 和 IE6 中检查此代码 - 您可能会在那里看到一些不一致之处。
如前所述 - 不要担心过于严格地遵守这些规则。它们是指南,您应该为您正在做的工作使用正确的工具。这里重要的是了解各种技术的最佳用途以及何时使用它们。有时,使用表格是完成您要做的事情的最佳工具,有时则不然。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。