Html 在不使用javascript的情况下，根据动态内容生成等高的div

对于产品页面，我需要显示一些产品（一张图片加上图片下方的标题）。一行将显示多个产品，下一行将显示后续产品。一行图像的数量取决于屏幕大小（响应）

对于每个产品行，标题应垂直对齐在页面的相同高度上。此外，一行上的图像应与该行中图像的垂直中心垂直对齐

产品图像将在稍后的体育场中从CMS（WordPress）加载，因此纵横比将有所不同

我已经创建了一个JavaScript解决方案，它非常适合启用JavaScript的浏览器。您可以检查它，代码如下。但是我想要一个非JavaScript的解决方案，这可能吗？我很难创建具有相同高度的浮动

div

s，其中的高度应跟随具有最大高度的图像的高度

注意：图像大小也应具有响应性，即图像宽度应为包含

div

的百分比

使用JavaScript编写的代码：

resize_products（）；
addEventListener（'resize'，function（））{
调整_产品的大小（）；
}，对）；
函数resize_products（）{
var img_padding=10；//设置为等于边距
//调整图像大小
var img_wrapper_dv=document.getElementsByClassName（“产品img包装”）；
如果（img\u包装器\u dv.length>0）{
var div_width=img_wrapper_dv[0]。偏移网络宽度；
var比率=[]；
比率[0]=3/2；//宽度/高度
比率[1]=2/3；
比率[2]=1；
比率[3]=4/3；
比率[4]=3/4；
比率[5]=1；
比率[6]=3/2；
比率[7]=2/3；
比率[8]=1；
var max_height=0；
对于（变量i=0；i最大进气高度）最大进气高度=进气高度；
}
对于（变量i=0；i

*{
框大小：边框框；
}
.产品img{
高度：自动；
位置：相对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
显示：块；
}
.产品包装{
位置：相对位置；
利润率：10px；
宽度：计算（20%-20px）；
/*连续5个产品*/
边框：1px实心#DDD；
浮动：左；
}
.产品名称{
显示：块；
文本对齐：居中；
字体系列：Arial，无衬线；
利润率：10px；
}
@媒体屏幕和屏幕（最大宽度：1200px）{
.产品包装{
宽度：计算（25%-20px）；
}
/*连续4个产品*/
}
@媒体屏幕和屏幕（最大宽度：1000px）{
.产品包装{
宽度：钙（33.33333%-20px）；
}
/*连续3个产品*/
}
@媒体屏幕和屏幕（最大宽度：800px）{
.产品包装{
宽度：计算（50%-20px）；
}
/*连续两个产品*/
}
@媒体屏幕和屏幕（最大宽度：600px）{
.产品包装{
宽度：计算（100%-20px）；
}
/*连续1个产品*/
}

滴度img0
滴度img1
滴度img2
滴度img3
滴度img4
滴度img5
滴度img6
滴度img7
滴度img8

这里是一个没有Javascript的示例，使用FlexBox进行布局。我只是没看过媒体的提问

*{
框大小：边框框；
}
#容器{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.产品img包装{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.产品img包装器img{
宽度：100%；
}
.产品包装{
最小宽度：计算（20%-20px）；
最大宽度：计算（20%-20px）；
利润率：10px；
/*连续5个产品*/
边框：1px实心#DDD；
显示器：flex；
证明内容：之间的空间；
调整项目：灵活启动；
柔性包装：包装；
}
.产品名称{
宽度：100%；
文本对齐：居中；
字体系列：Arial，无衬线；
利润率：10px；
自对准：柔性端；
}
@媒体屏幕和屏幕（最大宽度：1200px）{
.产品包装{
宽度：计算（25%-20px）；
}
/*连续4个产品*/
}
@媒体屏幕和屏幕（最大宽度：1000px）{
.产品包装{
宽度：钙（33.33333%-20px）；
}
/*连续3个产品*/
}
@媒体屏幕和屏幕（最大宽度：800px）{
.产品包装{
宽度：计算（50%-20px）；
}
/*连续两个产品*/
}
@媒体屏幕和屏幕（最大宽度：600px）{
.产品包装{
宽度：计算（100%-20px）；
}
/*连续1个产品*/
}

滴度img0
滴度img1
滴度img2
滴度img3
滴度img4
滴度img5
滴度img6
滴度img7
滴度img8

您可以使用进行此操作

首先，我们可以使用

#container

上的

flex wrap:wrap

设置

display:flex

，然后设置每个

.product wrapper

的宽度。这将考虑沿行均匀调整产品包装的大小

然后，我们还可以对每个

.product wrapper

使用

display:flex

，再次对每个

.product img wrapper

使用flex来处理每个产品包装中的中心问题

我们正在使用的功能