javascript - 当有多行 float 子项时，如何使容器div的宽度与 float 子项的宽度相同并居中？

我有一个带有多个浮动子div的容器div。每个孩子都有相同的宽度，但是行的大小根据屏幕宽度而变化。我希望容器仅是其子级的宽度，并且也要居中，所有这些都取决于屏幕大小。这篇文章解释了一个类似的问题：

Container div changes width when a second row of floating children is added

这是一个小提琴，也解释了这个问题：

.centered {
  text-align: center;
}

.container {
  background: red;
  padding: 10px;
  display: inline-block;
}

.child {
  width: 100px;
  height: 100px;
  float: left;
}

.child:nth-child(even) {
  background: green;
}

.child:nth-child(odd) {
  background: blue;
}
<div class="centered">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

http://jsfiddle.net/LxLjv3tm/1/

这是另一个stackoverflow帖子，解决了一行问题：

Having the floating children elements determine parent width

（问题是有足够的浮动子代来进行多行操作）

最佳答案

看起来jQuery是答案。为了“动态”设置容器div的宽度，我们需要通过jQuery计算屏幕调整大小事件的宽度。我们可以使用窗口的宽度和子项的宽度来计算内部容器的宽度。

这是小提琴：

var resizeContainerDiv = function() {
  var screenWidth = $(window).width();
  var childWidth = $(".child").outerWidth();
  var innerContainerWidth = Math.floor(screenWidth / childWidth) * childWidth;

  $('.container').css('width', innerContainerWidth);
}

$(window).on("load", resizeContainerDiv);

$(window).on("resize", resizeContainerDiv).resize();



.centered {
  text-align: center;
}

.container {
  background: red;
  padding: 10px;
  display: inline-block;
}

.child {
  width: 100px;
  height: 100px;
  float: left;
}

.child:nth-child(even) {
  background: green;
}

.child:nth-child(odd) {
  background: blue;
}


<div class="centered">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

https://jsfiddle.net/02arvnLx/1/