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以折叠周围的空格：sample fiddle

Answer 2

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

浮动 jsFiddle example

内联阻止 jsFiddle example

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

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;
}

Fiddle fork.

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

3 个答案: