Html CSS-具有可变高度的等宽图像

我想在行中显示任意数量的图像，其中每行正好包含3个固定宽度的图像。但是，我希望行的高度与行中最高的图像的高度相同，类似于下图中块的布局

目前我正在做这样的事情：

.ItemContainer{
    width: 200px;
    list-style-type: none;
}

.ItemContainer li{
    float: left;
}

.ItemContainer li img{
    width: 180px;
    margin: 10px 20px 10px 0;
}

---

然而，浏览器似乎试图填充空白，而不是按行显示，有没有办法仅使用CSS实现此布局？

我假设您的结构是ul>li>img

• Flex

  将有助于：

ul{
显示器：flex；
柔性包装：包装；
宽度：570px；/*用于强制包装的宽度*/
填充物：5px；
保证金：自动；
背景：灰色；
}
李{
显示：阻止；/*删除项目符号*/
宽度：180px；
保证金：5px；
填充：0；
}
img{
宽度：100%；/*填充整个宽度*/
}

将每3个图像包装在包含块元素（示例中为div.row）内，如下所示：

.row{
边框：纯色1px蓝色；
}
.row img{
垂直对齐：顶部；
}

尝试以下代码： 这是我在我的项目中做的，如果你想改变高度，然后做几个不同高度的块，并将它们浮动到左侧，但要注意宽度，等等

.part{
  background:;
  height:auto;
  width:%;
  float:right;
  padding-bottom:30px;
}
.block{
background-color:#ffd700;
float:left;
width: 200px;
height:300px;
border: 2px black;
padding-right:25px;
margin-top:3px;
margin-left:5px;
margin-right:35px;
color:black;
}

或使用包装器div

.wrapper{
清除：左；
}
.ItemContainer{
宽度：200px；
}
李先生{
浮动：左；
列表样式类型：无；
}
李先生{
左边距：10px；
}

在每3张图像放置一个clearfix div后，您是否也可以共享您的html结构？您是否可以使用html/css/js嵌入式工具并共享结构？查看Flexbox以获得更好的浏览器兼容性，只需使用块级元素包装每3张图像，如我的回答中所示。首先，没有理由用

.wrapper

div来包装单个元素

ul

。除此之外，这正是我的答案：-）哦，好吧，这是我的个人风格：）显然我可以在点击“发布我的答案”之前刷新屏幕检查答案。不考虑任何个人风格，多余的嵌套使我的眼睛抽搐；-）您的

li

已经用包含

ul

的包装，因此

div

在那里完全没有用…我不会选择

flex

作为这个（相当简单）场景的解决方案，因为它仍然没有得到完全支持（即…我知道…但仍然…）@RonenCypis嗯，那么float就可以了，我将把代码段复制/粘贴到浮动版本中