Html 围绕浮动元素包装父div

我试图让一个div环绕动态数量的子元素，我希望在不设置父元素宽度值的情况下这样做

我通过浮动子元素和父元素来包装内容，我的问题是，当子元素包装到下一行时，右侧还有剩余的可用空间，我希望父元素“紧密”包装

我在这里设置了一个演示：

#parent显示当前行为，我希望它的行为类似于#parent2和#parent3，但不明确设置宽度。我能理解为什么父母的行为是正确的，我只是看不出有任何方法可以达到我想要的行为

---

如果您有任何想法，我们将不胜感激。首先，您应该将“父”和“子”更改为类，而不是ID。ID意味着是唯一的标识符，而类可以根据需要被多次使用

话虽如此，您可以通过JQuery实现您想要的（假设ID现在更改为类）：

---

你是说，你想让红色的盒子保持在同一条线上，即使它们不适合显示器空间？不，我想让它们放在下一条线上，我只想删除每行最后一个子元素右侧的空格，即在示例中，我希望第一行最后一个子元素右侧的绿色背景永远不超过10px每行将显示多少？您是告诉它有多少行，还是浏览器可以通过某种方式来确定在一行上放置多少行？您继承的是宽度：868px；。使用width=0如何？每个元素都有一个固定的宽度，并且父div填充视口，因此每行的数量将根据您查看页面的分辨率动态变化。因此，如果我在1280x720视口中有三个子元素，每一个子元素的像素为500px，那么每一行上都会有两个子元素，在280px的父元素的右侧有一个间隙。谢谢，你说得对，我应该使用类，我只是简单地将其作为示例快速组合在一起。关于你的答案，它工作得非常完美，我只是想知道是否有任何方法可以不用javascript来实现它

$(document).ready(function() {
    var numPerLine = parseInt($(window).width() / $('.parent > .child').outerWidth(true));
    $('.parent').width($('.parent > .child').outerWidth(true) * numPerLine);
});