CSS Table-Like对齐没有表格？(CSS RelativeLayout)

Question

无论我在互联网上的哪个地方,我都不断地打败我,我不应该使用桌子.可悲的是,我是少数几个顽固到可以使用它们的程序员之一 - 我坦率地发现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支持这一个简单的功能,我可以立即放下表格,并创建甚至超出表格功能的布局!这种电源的良好但无用的例子是在桌子的相对侧上的两个断开的盒子,动态地共享彼此完全相同的高度和垂直位置.

但不幸的是,在我的互联网搜索中,到目前为止我发现的最先进的对齐是中心,左和右对齐.所有与OTHER元素无关的对齐类型,使它们无用.

我想要的只是一种将HTML元素与其他HTML元素对齐而无需使用表格的方法!

编辑

在为这个问题挑选标签时,我遇到的描述几乎总结了一切:

Relativelayout:一种布局,其中可以相对于彼此或与父母相关地描述孩子的位置.

有一个CSS RelativeLayout吗？或者,每当我想要这样做时,我都会使用表格？

我将接受最接近我想要的功能的答案,而不使用预定的宽度或高度(如果没有其他人提供更好的东西,包括答案"没有那样的存在").

Answer 1

可以将元素显示为非语义表的表,仅使用CSS.使用该display属性,您可以在标记中使用div时模仿表.看看这篇文章.

根据您想要实现的目标,有一些替代选项.如果您只希望每列中的两行粘贴到列的宽度,则应尝试将行放在列标记内而不是相反.这没有预定义的尺寸.

此外,如果行中每个单元格的高度设置相同,则可以简单地将它们浮动到左侧,并将容器宽度设置为行宽度的总和.这仅适用于预定义的尺寸.

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}

这是一个小提琴:http://jsfiddle.net/kdani3/DbRuV/

一个更复杂的例子:http://jsfiddle.net/kdani3/DbRuV/1/

我认为它比使用表格布局更简单,更简单.

另外,我真的建议你看一下CSS网格框架,比如Twitter Bootstrap.这绝对值得一看.