CSS Table-like对齐不使用表格？ （CSS RelativeLayout） [英] CSS Table-Like alignment using no tables? (CSS RelativeLayout)

问题描述

无论我何时上网，我总是不停地使用我不喜欢桌子的东西。不幸的是，我是几个顽固不化的程序员之一，仍然可以继续使用它们-坦率地说，我发现CSS的对齐和布局功能对我来说功能不足，冷火鸡，停止使用表。撇开我的个人程序员的特质，我想尝试用CSS系统来解决我的主要不满之一：

Wherever I go on the internet, I am constantly having it beat into me that I should not use Tables. Sadly, I am one of the few programmers who is stubborn enough to still be using them -- I frankly find the alignment and layout features of CSS inadequately powerful for me to, cold turkey, stop using tables. With my personal programmer idiosyncrasies set aside, I would like to try to attack one of my major discontentments with the CSS system:

假设我想要这样的布局：

Let's say I want to have a layout like this:

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

在上面的示例中，我想A和C的宽度相同， B 和 D 的宽度保持相同。

In the above example, I would like the widths of A and C to be the same, and the widths of B and D to remain the same.

我还希望 A 和 B 的高度保持锁定在一起，我希望 C 和D的高度保持相同。

I would also like the heights of A and B to remain locked together, and I would like the heights of C and D to stay the same as each other.

澄清一下，如果一列中的任何元素变宽，我希望该列中的 all 元素变宽。而且，如果一行中的任何元素变高，我再次希望同一行中的所有元素也变宽。

To clarify, if any element in a column gets wider, I'd like all of the elements in that column to get wider. And if any element in a row gets taller, I, again, want all of the elements in that very same row to get wider as well.

我刚刚描述的内容是我们的老朋友桌子的确切功能。我认为，表格对于此类布局非常有用！如果我尝试使用CSS布局进行类似的操作，则可能会得到以下内容：

What I have just described is the exact functionality of our old friend, the table. In my opinion, tables are very useful for these kinds of layouts! If I were to attempt something similar to that using CSS layouts, I might get something like this:

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

不是我想要的布局。 （ A 和 C 形成锯齿状的列，而不是我希望的完美平滑列）

Which would very much NOT be the kind of layout I am looking for. (A and C make jagged columns, as opposed to perfect, smooth columns as I would prefer)

简单地说，我可以真的使用一种方法，使用CSS布局（而不是预定义的宽度或高度）对齐边缘的位置一个CSS框，移到另一个CSS框的边缘位置。如果CSS支持这一简单功能，那么我可以立即永久放弃表格，并创建超出表格功能的布局！一个很好但无用的例子就是桌子相对两侧的两个断开连接的盒子，它们动态地共享彼此相同的高度和垂直位置。

To put my problem simply, I could really use a way to, using CSS layouts (and NOT predefined widths or heights) align the position of an edge of one CSS box, to the position of an edge of a different CSS box. If CSS supported that one simple feature, I could instantly let go of tables forever, and create layouts beyond even the capabilities of tables! A good, but useless example of such power would be two disconnected boxes on opposite sides of a table, dynamically sharing exactly the same height and vertical position as each other.

但是不幸的是，在互联网上搜索时，到目前为止，我发现的最高级的对齐方式是居中对齐，左对齐和右对齐。所有与OTHER元素无关的对齐类型，使它们无用。

But unfortunately, in my searches around the internet, the most advanced alignment I've found so far is center, left, and right alignment. All alignment types that are not relative to OTHER elements, making them useless.

我想要的只是一种将HTML元素与OTHER HTML元素对齐而无需使用表的方法！

All I want is just a way to align HTML elements to OTHER HTML elements without having to use tables!

在为这个问题选择标签时，我遇到了一个描述，几乎所有内容都做了总结上：

While picking the tags for this question, I came across a description that pretty much sums it all up:

Relativelayout：一种布局，其中子项的位置可以是相对于父项或父项的
。

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

是否有CSS RelativeLayout？还是我愿意在每次使用表时都坚持使用表？

Is there a CSS RelativeLayout? Or am I stuck using tables whenever I want to do this?

我将接受最接近所需功能的答案，而无需使用预定的宽度或高度（包括答案​​）如果没有其他人提供更好的东西，那么没有类似的东西存在。

I will accept the answer that comes closest to my desired functionality without using predetermined widths or heights (Including the answer "Nothing like that exists" if no one else provides something better).

推荐答案

可以将元素显示为在语义上没有表格，仅使用CSS。使用 display 属性，可以在标记中包含div时模仿表。 查看此文章。

It is possible to display elements as tables that aren't semantically tables, only using CSS. Using the display property, you can imitate tables while you have divs in your markup. Check this article.

根据您要实现的目标，有一些替代选项。如果只希望每列中的两行都与列的宽度保持一致，则应尝试将这些行放在column标记内，而不要相反。

Depending on what you want to achieve, there are some alternative options. If you only want the two rows in each column stick to the width of the column, you should try putting the rows inside the column tag instead of doing the opposite. This is working without predefined dimensions.

此外，如果将行中每个单元格的高度设置为相同，则只需将其向左浮动，然后将容器宽度设置为行宽的总和。

Also, if the heights are set the same for each cell in a row you could simply float them to left, and set container width to the sum of row width. This only works with predefined dimensions.

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

Also, I really recommend you to take a look at CSS grid frameworks, like Twitter Bootstrap. That's definitely worth a look.

这篇关于CSS Table-like对齐不使用表格？ （CSS RelativeLayout）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！