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 が 1 つだけの場合でも、div の幅が 400px のままであることです。私がやろうとしているのは、内部要素の幅を維持することです。たとえば、画像が1つある場合、divの幅は100pxになります。2 つある場合は 200px 幅になり、4 つになると次の行に下がり、このように 400px の幅で続き、より多くの画像を補うために高さが変更されます。

これを行う方法はありますか？min-width/max-width の組み合わせを使用してみましたが、正しく動作しないようです。

Answer 1

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