Javascript 如何将整个栅格缩略图高度设置为相等？

我有一排缩略图。它在

中作为包装进行编码，并且

用于显示每个缩略图。我已将以下CSS设置为

标记：

float: none;
display: inline-block !important; 

缩略图显示在网格中。我还在

被赋予了

显示：内联块

，HTML文件中的每个

之后都有换行符。请告诉我如何使用

display:inline block

显示每行4个缩略图

另外，如果我为

设置了
浮动：left
，那么我应该为每个
指定高度。但是那些
中的图像大小不同

问题是：

我想每行显示4列（现在只显示3列）
我想将边框设置为覆盖网格行的整个高度。（现在由于
的高度取决于缩略图的高度，因此对于较小的缩略图，右边框一直延伸到行的一半。）
请帮我做这个


正文{
背景色：#ddd；
}
。未设置样式的列表{
背景色：#eee；
宽度：100%；
}
.列出不带样式的li{
背景色：#eee；
浮动：无；
显示：内联块！重要；
/*显示：-moz网格！重要*/
填充：10px；
保证金：0；
右边框：2px实心#ddd；
边框底部：2倍实心#ddd；
框大小：边框框；
}
.列表未设置样式的li img{
宽度：100%；
}



示例标题


示例标题


示例标题


示例标题


示例标题


示例标题


示例标题


示例标题


示例标题


示例标题


示例标题


.list-unstyled {
   background-color: #eee;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}