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

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

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

来源

2011-11-27 el_pup_le

谁低估了我！？拜托我兄弟！ –

如果剩余> = 50像素，您希望foo填充容器。如果没有，会发生什么，转到下一行？顺便说一句 - 没有办法，这是可能的CSS只。 CSS不会做if语句。 – mrtsherman

我为你拨弄的东西：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中测试。 :)

来源

2011-11-27 10:47:05

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

来源

2011-11-27 10:29:26

-1

检查了这一点

它的工作现在

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

来源

2011-11-27 10:31:25

那不是你想要的，从.child div中移除背景颜色，你会看到.foo div实际上在.child div后面。 –

http://jsfiddle.net/mikulgohil/fdVws/1/现在检查，但你不会得到100％宽度的.foo分区 –

这并不真正的工作。如果你让第二个div更长，它会围绕第一个而不是右移： '

First

Second Second Second Second Second Second Second Second Second

' –

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

回答

相关问题