html – 当添加第二行浮动子项时,Container div更改宽度

概述在下面的jsFiddle中,当有两行时,容器div的宽度为100％,而当只有一行时,容器div的宽度小于100％(即它包裹子项). http://jsfiddle.net/fpooemgj/ 我希望容器div photo_stream_wrapper尽可能地围绕孩子们.我怎样才能做到这一点？ 一排： 两行： 我想要这个而不是最后一个图像.我想消除额外的灰色空间： 我有一个非常类似的问题,可以在我的 在下面的Jsfiddle中,当有两行时,容器div的宽度为100％,而当只有一行时,容器div的宽度小于100％(即它包裹子项).

http://jsfiddle.net/fpooemgj/

我希望容器div photo_stream_wrapper尽可能地围绕孩子们.我怎样才能做到这一点？

一排：

两行：

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

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

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?

就我而言,我有类似的东西：

<div >  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></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();.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 >  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div></div>

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

总结

以上是内存溢出为你收集整理的html – 当添加第二行浮动子项时,Container div更改宽度全部内容，希望文章能够帮你解决html – 当添加第二行浮动子项时,Container div更改宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。