浮动div填充父级的剩余宽度 [英] Floated div that fills remaining width of parent

问题描述

如果剩余的容量至少为50px，我如何能够填充剩余的容器宽度。如果foo> 50px，它移动到一个新行增加容器的高度。此问题 HTML / CSS：展开式float-left元素到parent的剩余宽度是相同的。我拒绝相信这不可能没有javascript。来到我兄弟。

How can I have foo fill the remainder of the container's width if there is at least 50px remaining. If foo is > 50px it moves to a new line increasing the container's height. This question HTML/CSS: Expanding a float-left element to remaining width of parent is the same. I refuse to believe this can't be done without javascript. Come at me bro.

.container {
  width: 300px;
  min-height: 30px;
  overflow: auto;
}
.child {
  float: left
}
.foo {
  /* ? */
}

推荐答案

您： http://jsfiddle.net/mac_cain13/K5fJP

.foo div有一个 min-width ，以确保它会到下一行有不到50px可用。 overflow：hidden; 确保div不在.child div之后。

The .foo div has a min-width to make sure it will go to the next line there is less then 50px available. The overflow: hidden; makes sure the div is not behind the .child div.

我添加了一些JavaScript演示当.child变宽时的行为。单击.child div以将一些像素添加到其宽度。当.child div占用这么多空间时，剩余的空间小于50px .foo div将跳到下一行。

I added some JavaScript to demo the behavior when .child gets wider. Click the .child div to add some pixels to it's width. When the .child div takes so much space that there is less then 50px left the .foo div will jump to the next line.

纯CSS，但只在Safari中测试。 ：）

Pure CSS, but only tested in Safari. :)

这篇关于浮动div填充父级的剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！