CSS 如何获取等高列表项的网格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9285564/
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
How to obtain a grid of equal height list items?
提问by helltallica
I am trying to do a grid of products using list items and inline-block. The problem is: the content of the blocks have variable heights and the inline-blockdoesn't keep the heights equal.
我正在尝试使用列表项和inline-block. 问题是：块的内容具有可变的高度，inline-block并且不保持高度相等。
The code:
编码：
#blocks ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#blocks li {
display:inline-block;
vertical-align:top;
width:280px;
background-color:#ff9933;
padding:13px;
margin: 0px 0px 20px 19px;
}
<div id="blocks">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Here's an image to illustrate the issue.
I need the blocks to keep the same height of the larger blocks, independently of its content. Is it possible to make someting like this?
我需要这些块与较大的块保持相同的高度，而与其内容无关。有可能做出这样的事情吗？
And finally: Sorry, english is not my mother language :)
最后：对不起，英语不是我的母语:)
采纳答案by JSuar
1.Adding the following to the liCSS will mimic the image example you provided.
1.将以下内容添加到liCSS 将模仿您提供的图像示例。
height: 150px;
min-height: 150px;
overflow:auto;
2.Also, here are some other approaches:
2.此外，这里还有一些其他方法：
回答by Hyman Senechal
There's a W3C candidate layout called "flexbox" that takes care of this problem and many others. To achieve the equal height boxes you would simply assign the property display: flexto the UL and display: blockto the LIs inside it.
有一个名为“flexbox”的 W3C 候选布局可以解决这个问题和许多其他问题。要实现等高的框，您只需将属性分配给display: flexUL 和display: block其中的 LI。
Example(CodePen)
示例（代码笔）
It's not going to get you very far if you need to support older browsers :) but if you can get around that this method is easy and super cool.
如果您需要支持较旧的浏览器，它不会让您走得太远:) 但如果您能解决这个问题，那么这种方法既简单又超级酷。
Reference: A Complete Guide to Flexbox
参考：Flexbox 完整指南
回答by Hawken
I don't think there is a way, barring javascript, to do this; my recommendation would be to set a defined height and maybe an overflow:autoso in the case that content does overflow it does not cripple your site and your readers can still see your content.
我认为除了 javascript 之外，没有办法做到这一点；我的建议是设置一个定义的高度，也许overflow:auto这样，在内容溢出的情况下，它不会削弱您的网站，您的读者仍然可以看到您的内容。
回答by SPRBRN
When you have more divs and thus more rows, without row-divs (container divs that mark a row), then the following example from CSS Tricks does what you need:
当你有更多的 div 和更多的行时，没有 row-divs（标记一行的容器 div），那么 CSS Tricks 中的以下示例可以满足你的需求：
The following code has eight list items. When only three or four items are displayed per role, then the given example will make all divs equal in height per row.
以下代码有八个列表项。当每个角色只显示三个或四个项目时，给定的示例将使所有 div 每行的高度相等。
<div id="blocks">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
回答by Tracker1
First, if you adjust your margin to be on all 4 sides it will space out a little better on the flow to new line.
首先，如果您将边距调整为在所有 4 个边上，它会在流向新行时更好地间隔开。
Second, you can either specify a min-height that is closer to something common for all areas, or run JavaScript to set them to the same on a line given a particular width.
其次，您可以指定一个更接近所有区域通用的最小高度，或者运行 JavaScript 以在给定特定宽度的线上将它们设置为相同。
