Html css，将元素紧紧包裹在未指定数量的图像周围

我有一个显示图像的元素。该元素需要随着图像的数量水平增长。我事先不知道会有多少张图片

我的问题是，当图像很少时，元素太宽。它没有足够紧密地围绕图像

（第一个示例有效，第二个示例无效。）

将

显示：内联块

添加到容器中以缩小大小，然后添加

字体大小：0

以折叠周围的空白：

将

显示：内联块

添加到容器中以缩小大小，然后添加

font size:0

以折叠周围的空白：

在外部div上设置

display:inline block

或

float:left

浮动

内联块

---

定位它们绝对也会收缩包装它们，但通常需要额外的位置规则（顶部、左侧等）。

在外部div上设置

显示：内联块

或

浮动：左侧

浮动

内联块

---

定位它们绝对也会收缩包装它们，但通常需要额外的位置规则（顶部、左侧等）。

使用

显示：内联块。是否需要强制执行最大宽度

HTML

<div class="outer">
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
</div>

使用
显示：内联块。是否需要强制执行最大宽度

HTML

<div class="outer">
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
</div>

最小宽度对您有帮助吗？像这样？最小宽度对你有帮助吗？像这样？
.outer{
  background: black;
  display: inline-block;
  padding: 10px 10px 5px 10px;
}
.inner {
  background: yellow;
  display: inline-block;
  width: 50px;
}