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

Question

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

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

http://jsfiddle.net/sXgzn/（第一个示例有效，第二个无效。）

<div class = "outer">
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
</div>

Answer 1

添加display:inline-block到容器以缩小以适应，然后添加font-size:0以折叠周围的空白：示例小提琴

Answer 2

在您的外部 div 上设置display:inline-block或设置。float:left

浮动jsFiddle 示例

内联块jsFiddle 示例

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

Answer 3

用于display: inline-block;外部和内部元素。您需要强制执行最大宽度吗？

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>

CSS

.outer{
  background: black;
  display: inline-block;
  padding: 10px 10px 5px 10px;
}
.inner {
  background: yellow;
  display: inline-block;
  width: 50px;
}

小提琴叉。