【发布时间】:2013-04-08 12:49:19
【问题描述】:
无论我去哪里上网,我都会不断地感到我不应该使用表格。可悲的是,我是少数几个顽固地仍在使用它们的程序员之一——坦率地说,我发现 CSS 的对齐和布局功能对我来说不够强大,冷火鸡,停止使用表格。撇开我个人的程序员特质不谈,我想尝试解决我对 CSS 系统的主要不满之一:
假设我想要这样的布局:
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
在上面的例子中,我希望 A 和 C 的宽度相同,B 和 D 的宽度保持相同。
我还希望A 和B 的高度保持锁定在一起,并且我希望C 和D 的高度保持彼此相同。
为了澄清,如果列中的任何元素变宽,我希望该列中的 所有 元素变宽。如果一行中的任何元素变高,我再次希望同一行中的所有元素也变宽。
我刚才描述的是我们的老朋友桌子的确切功能。在我看来,表格对于这些类型的布局非常有用!如果我尝试使用 CSS 布局进行类似的操作,我可能会得到这样的结果:
+-------+---+
| A | B |
+---*---*---+
| C | D |
+---+-------+
这将非常不是是我正在寻找的那种布局。 (A 和 C 制作锯齿列,而不是我喜欢的完美、平滑的列)
简单地说,我可以真的使用一种方法,使用 CSS 布局(而不是预定义的宽度或高度)将一个 CSS 框的边缘位置与不同 CSS 框的边缘。如果 CSS 支持这一简单功能,我可以立即永远放弃表格,并创建超出表格功能的布局!这种力量的一个很好但无用的例子是桌子两侧的两个断开连接的盒子,动态彼此共享完全相同的高度和垂直位置。
但不幸的是,在我在 Internet 上进行的搜索中,迄今为止我发现的最高级对齐方式是居中、左对齐和右对齐。所有与其他元素不相关的对齐类型,使它们无用。
我想要的只是一种无需使用表格就能将 HTML 元素与其他 HTML 元素对齐的方法!
编辑
在为这个问题选择标签时,我遇到了一个几乎总结了所有内容的描述:
Relativelayout: 一个布局,其中孩子的位置可以是 描述彼此之间或与父母之间的关系。
是否有 CSS 相对布局?还是我想这样做时都卡在使用表格?
我会接受最接近我想要的功能的答案,而不使用预定的宽度或高度(如果没有其他人提供更好的东西,包括答案“没有类似的东西存在”)。
【问题讨论】:
-
人们总是误会:这正是表格有意义且应该使用的情况。试图在纯 CSS 中模仿他们的行为是没有意义的。出于布局目的,在很多情况下应避免使用表格,但并非总是如此。
-
如果你真的想要一张桌子,那么一张桌子就是答案。但是,问题是您为什么绝对想要这种行为?这意味着在某些情况下,人们认为他们想要一个表格,但实际上响应式 css 解决方案可能同样好,甚至更好。