Jquery 将元素环绕图像，而不考虑屏幕大小

这与我之前的问题类似，但我意识到我有一个额外的要求

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

---

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

这说明了这个问题

编辑：所需结果更清晰：

从小提琴：使屏幕更小，所以只有2个太阳在顶行。黑色背景应该继续环绕图像，边缘没有额外的黑色

---

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

部分解。如果将外部包装向左或向右浮动，则它将捕捉到内部图像的外部边界，但当内部图像崩溃时，包装仍会超出内部图像的宽度

例如：

.outer
    position: relative;
    float: left;
}

当.outer div处于最大宽度时，您还必须清除任何不希望跳到它旁边的元素

希望这有帮助

您可以添加宽度：100%，最小宽度：120px，最大宽度：328px，框大小：边框框

外部div将占用父div的整个宽度，但最大宽度为328px

检查演示：

注意！！在演示中，外部div位于divdemobody内部，用于模拟调整。调整demobody的宽度，然后单击run查看差异

如果屏幕低于328px

如果屏幕大于328px

如果屏幕为225px，您可以尝试以下操作：

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

---

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

HTML示例：

jQuery：

---

请向我们展示您尝试过的内容。如果有效，那么您的问题是什么？我们的JSFIDLE代码运行良好，我想，第四个图像将转到下一行，外部元素应相应地收缩。编辑：只是为了清楚：上面有2个，下一行有1个：在第二个图像下面有黑色空间是可以的。我只是不想要宽的黑色右边缘。这不是动态的，调整窗口大小=什么都不会发生。很难用小提琴来说明窗口大小的调整。你知道，这就是我制作divdemobody的原因。调整divdemobody的宽度，然后单击run以查看DYNAMICNESS。在第二个演示中，右侧的额外黑色区域在我的真实案例中尝试了这一点。它仍然有额外的黑色边缘：就像你拿着你的演示2，然后按下屏幕使图像进入下一行一样。@user984003我认为没有办法删除额外的黑色边缘，除非像使用javascript一样计算宽度。根据OP请求，他需要.outer上的背景，图片上没有。我没有看到任何与此相关的需要。编辑：只是为了清楚：上面有2个，下一行有1个：在第二张图片下面有黑色空间是可以的。我只是不想要宽大的黑色右边缘user984003 1小时前是的，在我看来，这只是意味着，如果只有一个图像浮动到下一行右下角，她不想拉伸外部容器的背景。我看不出有什么理由认为哪个元素是有色的很重要。你读过了吗？在第二个图像角下方留有黑色空间是可以的！=边境

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

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

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

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

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

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();