填充父级剩余宽度的浮动div答案

【问题标题】：Floated div that fills remaining width of parent填充父级剩余宽度的浮动div
【发布时间】：2012-01-07 06:15:03
【问题描述】：

如果剩余至少 50 像素，我如何让 foo 填充容器宽度的剩余部分。如果 foo > 50px，它将移动到增加容器高度的新行。这个问题HTML/CSS: Expanding a float-left element to remaining width of parent 是一样的。我拒绝相信没有 javascript 就无法做到这一点。兄弟来找我。

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

【问题讨论】：

谁对我投了反对票！？来吧兄弟！
如果剩余 >= 50px，您希望 foo 填充容器。没有时会发生什么，转到下一行？顺便说一句 - 这不可能只有 CSS。 CSS 不做 if 语句。

标签： html css

【解决方案1】：

我为你摆弄了一些东西：http://jsfiddle.net/mac_cain13/K5fJP

.foo div 有一个 min-width 以确保它会转到下一行，可用的像素少于 50px。 overflow: hidden; 确保 div 不在 .child div 后面。

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

纯 CSS，但仅在 Safari 中测试。 :)

【讨论】：

【解决方案2】：

当您知道其他的宽度时，可以使用 CSS hack。或者你可以只使用一张桌子。但是CSS中没有“width: 100% - otherelement.width”这样的概念，这只适用于JavaScript。

【讨论】：

【解决方案3】：

看看这个

它正在工作

http://jsfiddle.net/mikulgohil/fdVws/

HTML 代码：

<div class="container"> <div class="child">First</div> <div class="foo">Second</div> </div>

CSS 代码：

.container {
  width: 300px;

  overflow: auto;
    background:#ff00dd;
}
.child {
  float: left;
    background:#ff0;
}
.foo {
  background:#0033dd;
}

【讨论】：

这不是你想要的，从 .child div 中删除背景颜色，你会看到 .foo div 实际上在 .child div 后面。
jsfiddle.net/mikulgohil/fdVws/1 现在检查，但你不会得到 .foo div 的 100% 宽度
那行不通。如果你让第二个 div 更长，它会环绕第一个而不是向右浮动：<div class="container"> <div class="child">First</div> <div class="foo">Second Second Second Second Second Second Second Second Second </div> </div>