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>

#块ul{
列表样式类型：无；
边际：0px；
填充：0px；
}
#块李{
显示：内联块；
垂直对齐：顶部；
宽度：280px；
背景色：#ff9933；
填充：13px；
利润率：0px 0px 20px 19px；
}

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

---

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

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

---

第二，您可以指定一个最小高度，该高度接近所有区域的公共高度，或者运行JavaScript在给定特定宽度的行上将其设置为相同的高度；我的建议是设置一个定义的高度，可能是一个

溢出：auto

，这样在内容溢出的情况下，它不会破坏您的网站，您的读者仍然可以看到您的内容。

1。在

li

CSS中添加以下内容将模拟您提供的图像示例

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

2.此外，还有一些其他方法：

---

有一个名为“flexbox”的W3C候选布局可以解决这个问题和其他许多问题。要实现等高框，只需将属性

display:flex

分配给UL，并将属性

display:block

分配给其中的LIs即可

（代码笔）

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

---

参考：

如果您有更多的div，因此有更多的行，而没有行div（标记行的容器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方法。不知道是不是最好的方法，但是。。。让我们看看：）很高兴我能帮忙，但你应该试着让谷歌成为你的朋友：除非

height:是相对的，没有理由包括
最小高度：
您可以这样做并垂直集中LIs内的内容吗？是的，您可以添加
display:flex；弯曲方向：立柱到LIs本身并玩它。抱歉，忘记添加
内容：中心，这就是使LI内容对齐到中间的原因。