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

Question

我有一个包含多个 float 子 div 的容器 div。每个 child 都有相同的宽度，但行的大小根据屏幕宽度而变化。我希望容器只是其子项的宽度并且也居中，所有这些都动态地取决于屏幕大小。这篇文章解释了一个类似的问题:

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

这是一个也解释了这个问题的 fiddle :

.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

(问题是有足够多的 float child 来制作多行)

Answer 1

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

这是 fiddle :

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/