不使用表格的 CSS Table-Like 对齐方式？(CSS 相对布局)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16031559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Table-Like alignment using no tables? (CSS RelativeLayout)
提问by Georges Oates Larsen
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:
无论我在互联网上的哪个地方，我都不断地意识到我不应该使用 Tables。可悲的是，我是为数不多的顽固到仍在使用它们的程序员之一——坦率地说，我发现 CSS 的对齐和布局功能不够强大，我冷火鸡，停止使用表格。抛开我个人的程序员特质，我想尝试攻击我对 CSS 系统的主要不满之一：
Let's say I want to have a layout like this:
假设我想要一个这样的布局：
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
In the above example, I would like the widths of A and C to be the same, and the widths of Band Dto remain the same.
在上面的例子中，我想A和C的宽度是相同的，和的宽度B和D保持不变。
I would also like the heights of Aand Bto remain locked together, and I would like the heights of Cand D to stay the same as each other.
我也想的高度A，并B保持锁定在一起，和我想的高度C和d留在彼此相同。
To clarify, if any element in a column gets wider, I'd like allof 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.
澄清一下，如果列中的任何元素变宽，我希望该列中的所有元素变宽。如果一行中的任何元素变高，我再次希望同一行中的所有元素也变宽。
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:
我刚刚描述的是我们的老朋友桌子的确切功能。在我看来，表格对于这些类型的布局非常有用！如果我尝试使用 CSS 布局进行类似的操作，我可能会得到如下结果：
+-------+---+
| A | B |
+---*---*---+
| C | D |
+---+-------+
Which would very much NOTbe the kind of layout I am looking for. (Aand Cmake jagged columns, as opposed to perfect, smooth columns as I would prefer)
这不会是我正在寻找的那种布局。（A并C制作锯齿状的柱子，而不是我更喜欢的完美、光滑的柱子）
To put my problem simply, I could reallyuse 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, dynamicallysharing exactly the same height and vertical position as each other.
简单地说，我真的可以使用一种方法，使用 CSS 布局（而不是预定义的宽度或高度）将一个 CSS 框的边缘位置与另一个 CSS 框的边缘位置对齐。如果 CSS 支持这个简单的功能，我可以立即永远放弃表格，并创建超出表格功能的布局！这种力量的一个很好但无用的例子是桌子两侧的两个断开连接的盒子，动态地共享完全相同的高度和垂直位置。
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.
但不幸的是，在我在互联网上的搜索中，迄今为止我发现的最先进的对齐方式是居中、左对齐和右对齐。所有与 OTHER 元素无关的对齐类型，使它们无用。
All I want is just a way to align HTML elements to OTHER HTML elements without having to use tables!
我想要的只是一种无需使用表格即可将 HTML 元素与其他 HTML 元素对齐的方法！
EDIT
编辑
While picking the tags for this question, I came across a description that pretty much sums it all up:
在为这个问题选择标签时，我发现了一个几乎可以概括所有内容的描述：
Relativelayout: A Layout where the positions of the children can be described in relation to each other or to the parent.
相对布局：一种布局，其中子项的位置可以相对于彼此或父项进行描述。
Is there a CSS RelativeLayout? Or am I stuck using tables whenever I want to do this?
是否有 CSS 相对布局？还是每当我想这样做时，我就一直在使用表格？
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).
我将接受最接近我想要的功能的答案，而不使用预定的宽度或高度（如果没有其他人提供更好的答案，则包括答案“没有类似的东西存在”）。
采纳答案by kdani
It is possible to display elements as tables that aren't semantically tables, only using CSS. Using the displayproperty, you can imitate tables while you have divs in your markup. Check this article.
可以仅使用 CSS 将元素显示为不是语义表的表。使用该display属性，您可以在标记中有 div 时模仿表格。检查这篇文章。
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
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;
}
Here is a fiddle: http://jsfiddle.net/kdani3/DbRuV/
这是一个小提琴：http: //jsfiddle.net/kdani3/DbRuV/
A more complex example: http://jsfiddle.net/kdani3/DbRuV/1/
一个更复杂的例子：http: //jsfiddle.net/kdani3/DbRuV/1/
I think it's really simple, even simpler than using a table layout.
我认为这真的很简单，甚至比使用表格布局还要简单。
Also, I really recommend you to take a look at CSS grid frameworks, like Twitter Bootstrap. That's definitely worth a look.
另外，我真的建议您查看 CSS 网格框架，例如Twitter Bootstrap。这绝对值得一看。
回答by Sieryuu
I think for using pure CSS, with no Width, and no using tableyou can use Flex Layout
我认为使用纯 CSS，没有Width，没有使用，table你可以使用Flex 布局
This is the code
这是代码
HTML
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
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;
}
Here is the JsFiddle
这是JsFiddle
