如何通过最大宽度限制 div，但减少时保持内部元素的宽度？答案

【问题标题】：How to limit a div by a max-width, but keep to the width of interior elements when less?如何通过最大宽度限制 div，但减少时保持内部元素的宽度？
【发布时间】：2013-06-22 22:20:53
【问题描述】：

好的，所以我有以下 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 的宽度继续这样，现在高度会发生变化以补偿更多图像。

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

【问题讨论】：

标签： html responsive-design css

【解决方案1】：

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

【讨论】：