Question

我有一个带有多个浮动子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

（问题是有足够的浮动孩子来制作多行）

Answer 1

看起来jQuery就是答案。为了动态地＃34;设置容器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/

我怎样才能使容器div与浮动子容器的宽度相同，并在有多行浮动子容器时将其居中？

1 个答案: