Question

这与我之前的问题css, Wrap element tightly around unspecified number of images类似，但我意识到我有额外的要求。

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

此外，如果屏幕小于元素的最大宽度，则图像应转到下一行，外部元素应相应缩小。

编辑：所需结果更清晰： http://jsfiddle.net/sXgzn/23/

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

来自小提琴：让屏幕更小，所以顶行只有2个太阳。黑色背景应继续环绕图像，边缘不会有额外的黑色。

编辑：只是为了清楚：在顶部有2个，在下一行有1个：在第二个图像下面有黑色空间是可以的。我只是不想要宽黑色的右边缘。

Answer 1

部分解决方案。如果你向左或向右浮动外包装，那么它将捕捉到内部图像的外边界，但是当它们向下折叠时，你仍然会遇到包装器延伸超出内部图像宽度的问题。

例如：

.outer
    position: relative;
    float: left;
}

当你的.outer div处于最大宽度时，你还必须清除你不想跳到的任何元素;

希望这有帮助

Answer 2

您可以做的是添加width:100%，min-width:120px，max-width:328px，box-sizing:border-box

.outer {
    background:black;
    padding:10px;
    display:inline-block;
    width:100%;
    min-width:120px !important;
    max-width:328px !important;
    box-sizing:border-box;
}

外部div将占用父div的整个width但是max-width 328px

检查演示：

（注意!!在演示中，外部div位于div#demobody内以模拟调整。调整width的{{1}}并单击“运行”以查看差异。）

DEMO （如果屏幕低于328px）

DEMO （如果屏幕超过328px）

DEMO （如果屏幕为225像素）

Answer 3

你可以试试这个：

.outer {
    padding:10px 10px 10px 15px;
    max-width:360px;
    display:inline-block;
}
.inner {
    display: block;
    float: left;
    width:100px;
    background-color: black;
    padding: 10px;
    margin: -5px 0 -5px -10px;
}

http://jsfiddle.net/dagobald/7D5jr/

Answer 4

因为我没有找到解决这个问题的正确方法，你可以使用JavaScript和一些jQuery来做到这一点：

<强> LIVE DEMO

HTML示例：

<div class="images">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</div>

<强> CSS：

.images{
  background:#000;
  font-size:0;
}

.images img{
  width:90px;
  height:90px;
  background:#000;
  margin:5px;
}

<强> jQuery的：

var $img = $('.images img'),
    n = $img.length,
    w = 100;  // img width + margins

$(window).resize(function(){  
  var W = $('body').width(), 
      s = Math.min(~~(W/w)||1, n);
      $('.images').width(s*w);
}).resize();

无论屏幕大小如何，都会在图像周围包裹元素

4 个答案: