CSS Table-like alignment using no tables？ (CSS RelativeLayout)

无论我在互联网上去哪里，我都不断地殴打我，不要使用桌子。可悲的是，我是少有的程序员之一，他们仍然坚持使用它们 – 我坦白地发现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元素与OTHER HTML元素对齐的方式，而不必使用表！

编辑

在挑选这个问题的标签时，我遇到了一个很多的描述：

Relativelayout: A Layout where the positions of the children can be
described in relation to each other or to the parent.

有没有CSS RelativeLayout？还是当我想这样做时，我卡住了表？

我将接受最接近我所需功能的答案，而不使用预定的宽度或高度(包括答案​​“没有什么存在”，如果没有人提供更好的东西)。

解决方法

可以将元素显示为不是语义表的表，只能使用CSS。使用display属性，您可以在标记中使用div时模仿表。 Check this article。

根据您想要实现的目标，还有一些备选方案。如果您只希望每列中的两列符合列的宽度，则应该尝试将列放在列标记中，而不是相反。这是没有预定义的维度工作。

另外，如果一行中的每个单元格的高度相同，您可以简单地将它们浮动到左边，并将容器宽度设置为行宽度的总和。这仅适用于预定义的维度。

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.这绝对值得一看。