添加第二行浮动子项时，容器div将更改宽度 [英] Container div changes width when a second row of floating children is added

问题描述

在下面的jsFiddle中，当有两行时，容器div的宽度是100％，当只有一个时，容器div的宽度小于100％（即它包装子项）。

两行：

我想要这个而不是最后一个图片。我想消除额外的灰色空间：

解决方案

我有一个非常类似的问题，可以在我的帖子中引用：

如何使容器div与浮动的孩子和中心的宽度相同

在我的例子中，我有这样的行：

 < 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> 
  

看起来像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（）; 
 
 
。center {
 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/

In the following jsFiddle, the width of the container div is 100% when there is two rows, and less than 100% when there is only one (i.e. it wraps the children).

http://jsfiddle.net/fpooemgj/

I'd like for the container div photo_stream_wrapper to be as tight as possible around the children. How can I achieve that?

One row:

Two rows:

I want this instead of the last image. I want to eliminate the extra grey space:

解决方案

I had a very similar problem, which can be referenced in my post:

How can I make a container div the same width as it's floating children and center it when there are multiple rows of floating children?

In my case I have something along the lines of this:

<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>

It looks like jQuery is the answer. In order to "dynamically" set the width of the containing div, we need to calculate the width on a screen resize event via jQuery. We can use the width of the window and the width of the children to calculate the width of the inner container.

Here is the 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/

这篇关于添加第二行浮动子项时，容器div将更改宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！