css，紧紧围绕未指定数量的图像 [英] css, Wrap element tightly around unspecified number of images

问题描述

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

I have an element that displays images. This element needs to grow horizontally with the number of images. I do not know beforehand how many images there will be.

我的问题是，当有几个图像时，元素太宽。它在图片周围不够紧密。

My problem is that the element is too wide when there are few images. It does not wrap closely enough around the images.

http：/ /jsfiddle.net/sXgzn/ （第一个示例工作，第二个示例不工作。）

http://jsfiddle.net/sXgzn/ (The first example works, the second does not.)

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

推荐答案

设置 display：inline

Set either display:inline-block or float:left on your outer div.

浮动

Float jsFiddle example

在线阻止 jsFiddle示例

Inline-block jsFiddle example

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

Positioning them absolutely will also shrink wrap them but usually requires additional position rules (top, left, etc.).

这篇关于css，紧紧围绕未指定数量的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！