Question

如果剩余至少50px，我怎么能让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 {
  /* ? */
}

Answer 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中测试过。：）

Answer 2

当您知道其他人的宽度时，可以使用CSS hacks。或者你可以使用一张桌子。但CSS中没有概念，例如“width：100％ - otherelement.width”，这只适用于JavaScript。

Answer 3

检查出来

现在正在使用

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

HTML code：

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

浮动div填充父母的剩余宽度

3 个答案: