display：具有多行的表格单元格（高度相等的列，多行）

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 li width is ignored.

你期望3行3列,每行200px-ish宽。但似乎忽略了li宽度。

Is there any way to force rows with display: table-cell without adding in extra markup?

有没有办法强制显示行:table-cell而不添加额外的标记?

Edit: Also, I'm using table-cell because 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。我见过的所有等高柱解决方案都无法做到这一点。

6 个解决方案

#1

You can give display:inline-table instead of display:table-cell to 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/

检查这个http://jsfiddle.net/56FGT/1/

#2

If you want css to show 3 <li>s in one row each of width 200px in same <ul>, You can try something like this with your above html:

如果你想让css在同一个

的宽度为200px的行中显示3个
• ,你可以尝试使用上面的html:

ul { list-style: none outside none; width: 600px; }
li { float: left;display: block;width: 200px; height: 33px; }​

Demo

#3

This is the solution 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,它们之间的换行符将占用一些宽度。

#4

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

我认为没有语义解决方案。它应该是每个项目集的包装容器,以应用相同的高度。但是有可能解决设计问题(有点制作网格)这里是一个如何制作它的例子:一行中具有相同高度的多行

#5

I am using display: inline-block and 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是唯一的方式(我能想到的)

#6

If you can't change the markup, it can be done without faking a table. You can make the list items display:block instead of display:table-cell.

如果您无法更改标记,则可以在不伪造表的情况下完成。您可以使列表项显示:block而不是display:table-cell。

By the way, 33% of 600px is not 200 pixels. Use 200px!

顺便说一句,600px的33%不是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来对齐内容。 (但由于这也不是一个选项,因此不会更改标记的解决方案。)