css，将元素紧紧围绕未指定数量的图像

我有一个显示图像的元素。这个元素需要随着图像的数量水平增长。我事先不知道会有多少图像。css，将元素紧紧围绕未指定数量的图像

我的问题是，当图像很少时，元素太宽。它不包裹在图像周围。

http://jsfiddle.net/sXgzn/（第一个示例中，第二不。）

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

来源

2013-08-20 user984003

会一个最小宽度对你有所帮助？ – SunSparc

喜欢这个？ http://jsfiddle.net/yesxB/1/ – kunalbhat

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

浮动jsFiddle example

inline-block的jsFiddle example

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

来源

2013-08-20 20:35:22 j08691

添加display:inline-block到容器收缩到配合，然后添加font-size:0折叠周边空白：sample fiddle

来源

2013-08-20 20:34:18

使用外部和内部元素上的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.

来源

2013-08-20 20:38:43 kunalbhat

css，将元素紧紧围绕未指定数量的图像

回答

相关问题