Grid 如何获得等高列表项的网格？

我正在尝试使用列表项和内联块创建产品网格。问题是：块的内容具有可变高度，而内联块不保持高度相等

守则：

#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>

我需要这些块与较大的块保持相同的高度，独立于其内容。有可能做出类似的事情吗

---

最后：对不起，英语不是我的母语：

首先，如果您将边距调整为四边，它将在新线的流程中留出更好的空间

---

第二，您可以指定一个最小高度，该高度接近所有区域的公共高度，或者运行JavaScript在给定特定宽度的行上将其设置为相同的高度；我的建议是设置一个定义的高度，可能还有一个溢出：auto，这样在内容溢出的情况下，它不会破坏您的站点，您的读者仍然可以看到您的内容。

1。将以下内容添加到LICSS将模拟您提供的图像示例

    height: 150px;
    min-height: 150px;
    overflow:auto;

二,。此外，还有一些其他方法：

---

有一个名为flexbox的W3C候选布局解决了这个问题和许多其他问题。要实现等高框，只需将display:flex属性指定给UL，将display:block属性指定给其中的LIs即可

代码笔

如果您需要支持较旧的浏览器，那么它不会让您走得很远：但是如果您能够绕开它，那么这种方法非常简单而且非常酷

---

参考：

如果您有更多的div，因此有更多的行，而没有标记行的row divs容器div，那么下面的CSS技巧示例就满足了您的需要：

下面的代码有八个列表项。当每个角色仅显示三个或四个项目时，给定的示例将使所有div的每行高度相等

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

---

谢谢你的回答。我会尝试用JavaScript做一些事情。谢谢你的回答。正如你所说，Javascript就是一种方式：谢谢你的回答。你发布的第二个链接有一些方法可以满足我的需要。我将尝试javascript方法。不知道是不是最好的方法，但是。。。让我想想：很高兴我能帮忙，但你应该试着让谷歌成为你的朋友：除非身高：；是相对的，没有理由包括最小高度：；您可以这样做并垂直集中LIs中的内容吗？是的，您可以添加display:flex；弯曲方向：立柱；到LIs本身并使用它。抱歉，忘记添加内容：中心；，这就是为什么LI的内容与中间对齐的原因。