不使用表格的CSS Table-Like对齐？ （CSS RelativeLayout）

Question

无论我上网，无论在哪里，我总是不停地打败我，我不应该使用表格。可悲的是，我是少数几个仍然坚持使用它们的程序员之一 - 我坦率地发现CSS的对齐和布局特性对我来说不够强大，冷火鸡，不要使用表格。设置我的个人程序员的特质之外，我想尝试攻击我的CSS系统主要discontentments之一：

比方说，我想有这样的布局：

+---+---+ 
| A | B | 
+---+---+ 
| C | D | 
+---+---+ 

在上面例如，我希望A和C的宽度相同，并且B和D的宽度保持不变。

我也想高度A和B保持锁定在一起，我想C和D的高度保持不变。

为了澄清，如果列中的任何元素变得更宽，我希望该列中的元素的所有变得更宽。如果一行中的任何元素变得更高，我又想让同一行中的所有元素都变得更宽。

我刚刚描述的是我们的老朋友表的确切功能。在我看来，表格对于这些布局非常有用！如果我尝试类似于使用CSS布局的东西，我可能会是这样的：

+-------+---+ 
| A | B | 
+---*---*---+ 
| C | D | 
+---+-------+ 

这将非常不是我要找的那种布局。 （A和C使锯齿列，而不是完美，流畅的列，我宁愿）

把我的问题简单地说，我可以真的使用方式，使用CSS布局（不是预先定义的宽度或高度）将一个CSS框边缘的位置对齐到不同CSS框边缘的位置。如果CSS支持一个简单的功能，我可以立即放弃表格，并创建布局甚至超出表格的功能！这种功率的一个很好但无用的例子是在桌子两侧的两个断开的盒子，动态地彼此共享完全相同的高度和垂直位置。

但不幸的是，在我对互联网的搜索中，迄今为止我发现的最先进的对齐方式是中心，左对齐和右对齐。所有与其他元素不相关的对齐类型，使它们无用。

我想要的只是一种将HTML元素与其他HTML元素对齐而不必使用表的方法！

编辑

虽然采摘标签这个问题，我碰到一个描述传来，几乎总结了这一切：

的RelativeLayout：布局在孩子的位置可以 描述相对于彼此或与父母相关。

有没有CSS RelativeLayout？或者我坚持使用表格，只要我想这样做？

我将接受最接近我想要的功能，而无需使用预定的宽度或高度（包括回答“没事就好存在，”如果没有其他人提供更好的东西）答案。

Answer 1

是可能的显示元件是，不语义表格，仅使用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。这绝对值得一看。

Answer 2

我认为使用纯CSS，没有Width，并使用table没有，你可以使用Flex Layout

这是代码

HTML

<section class="flexrow"> 
    <div class='item'>1asdf</div> 
    <div class='item'>2</div> 
</section> 
<section class="flexrow"> 
    <div class='item'>1</div> 
    <div class='item'>2</div> 
</section> 

CSS

.flexrow { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    -webkit-justify-content: space-between; 
    -moz-justify-content: space-between; 
    -ms-justify-content: space-between; 
    -o-justify-content: space-between; 
    margin-bottom: 10px; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    -o-align-items: center; 
    -webkit-flex: none; 
    -moz-flex: none; 
    -ms-flex: none; 
    -o-flex: none; 
} 
.item { 
    -webkit-flex: 1; 
    -moz-flex: 1; 
    -ms-flex: 1; 
    -o-flex: 1; 
    margin: auto 10px; 
    border-radius: 5px; 
    border:1px solid black; 
} 

这里是JsFiddle