html - 如何通过最大宽度限制 div，但在更少时保持内部元素的宽度？

Question

好的，所以我有以下 HTML：

<div class="element">
    <img src="..."> //Each of width 100px
    <img src="...">
    <img src="...">
    ... //Continues depending on user - retrieved using PHP
</div>

我的 CSS 有以下内容：

.element{
max-width: 400px;
}

但是我的问题是，当只显示一个img时，div的宽度还是400px？我想要做的是保持内部元素的宽度，例如当有一个图像时，div 将是 100px 宽；当有 2 个时，它将是 200px 宽，然后当它达到 4 个时，它会下降到下一行，并以 400px 的宽度继续这样，现在高度会发生变化以补偿更多图像。

任何人有任何想法如何做到这一点？我尝试使用最小宽度/最大宽度的组合，但我似乎无法让它正常工作。

Answer 1

.element{
max-width: 400px;
display:inline-block;
}