CSS 显示：具有多行的表格单元格（等高列，多行）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10595601/
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
display: table-cell with multiple rows (equal height columns, multiple rows)
提问by sandeep
Given a list:
给出一个列表：
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
And this CSS:
这个CSS：
ul { display: table; width: 600px; }
li { display: table-cell; width: 33%; }
You'd expect 3 rows of 3 columns, each 200px-ish wide. But it seems the liwidth is ignored.
你会期望 3 行 3 列，每行 200px-ish 宽。但似乎li宽度被忽略了。
Is there any way to force rows with display: table-cellwithout adding in extra markup?
有没有办法在display: table-cell不添加额外标记的情况下强制行？
Edit:Also, I'm using table-cellbecause I want then entire row to have the same height (despite varying content), as I want to position something in all three cells in each row, but at the bottom of the lowest cell. That is a confusing sentence I know.
编辑：另外，我使用table-cell是因为我希望整行具有相同的高度（尽管内容不同），因为我想在每行的所有三个单元格中放置一些东西，但在最低单元格的底部。这是我知道的一个令人困惑的句子。
Basically I want to turn a bunch of lis into equal height columns, but with multiple rows only using CSS. All the equal height column solutions I've seen can't do this.
基本上我想把一堆lis 变成等高的列，但多行只使用 CSS。我见过的所有等高列解决方案都无法做到这一点。
采纳答案by Naveed
This is thesolution I came up with.
The markup is slightly modified, to remove the whitespace. This is because with the lis set to display: inline, the newlines between them will take up some of the width.
标记略有修改，以删除空格。这是因为将lis 设置为display: inline，它们之间的换行符将占用一些宽度。
回答by sandeep
You can give display:inline-tableinstead of display:table-cellto LI. Write like this:
你可以给display:inline-table而不是display:table-cell给 LI。像这样写：
ul { display: table; width: 600px; font-size:0;}
li { display: inline-table; width: 33%;background:red; font-size:15px;}
Check this http://jsfiddle.net/56FGT/1/
回答by Naveed
If you want css to show 3 <li>s in one row each of width 200pxin same <ul>, You can try something like this with your above html:
如果您希望 css<li>在同一行中显示 3 s，每行宽度200px相同<ul>，您可以使用上面的 html 尝试这样的操作：
ul { list-style: none outside none; width: 600px; }
li { float: left;display: block;width: 200px; height: 33px; }?
Demo
演示
回答by Dmitri
I think there is no semantic solution. It should be wrapper container for every set of items to apply same height to them. But it's possible to solve design problem (kinda make a grid) here is an example how to make it: multiple rows with same height on a line
我认为没有语义解决方案。它应该是每组项目的包装容器，以对它们应用相同的高度。但是可以解决设计问题（有点制作网格），这是一个如何制作的示例：一行上具有相同高度的多行
回答by Populus
I am using display: inline-blockand vertical-align: top
我正在使用display: inline-block和vertical-align: top
But if you want background that stretches with height as well, javascript is the only way (that I can think of)
但是如果你想要背景也随着高度延伸，javascript是唯一的方法（我能想到的）
回答by Mr Lister
If you can't change the markup, it can be done without faking a table. You can make the list items display:blockinstead of display:table-cell.
如果您无法更改标记，则无需伪造表格即可完成。您可以制作列表项display:block而不是display:table-cell.
By the way, 33% of 600pxis not 200 pixels. Use 200px!
顺便说一下，33%600px不是 200 像素。使用200px！
Edit:
If you know what the maximum height of the content is going to be, you can use that as the height for all list items of course, and use vertical-align or line-height to align the contents. (But as that's not an option either, the solutions that don't change the markup are out.)
编辑：
如果您知道内容的最大高度是多少，您当然可以将其用作所有列表项的高度，并使用 vertical-align 或 line-height 来对齐内容。（但由于这也不是一种选择，不改变标记的解决方案已经过时了。）
