CSS - 填充包含 div 的剩余宽度

Question

我有一个包含 div，里面有几个 div。

这些都没有宽度。

我想让黑色 div 填满整个空间，所以它会延伸到右侧的 ABC div。

只需要在 Chrome 中工作，当然也欢迎跨浏览器!

<div id="player">
    <div id="now_playing">
        <div id="now_playing_icon">
            A
        </div>
        <div id="now_next_container">
            <div id="now_next_now">
                Now: Blah Blah
            </div>
            <div id="now_next_next">
                Next: Blah Blah
            </div>
        </div>
        <div id="timeline">
            fill the remainder width 20px margin
        </div>
        <div id="now_playing_controls">
            ABC
        </div>
    </div>
</div>​

#now_next_container{
    float: left;
    padding-top: 15px;
}

#now_next_next{
    color: #777777;
    font-size: 13px;
}

#now_next_now{
    color: #303030;
    font-size: 16px;
}

#now_playing{
    background: #edeeed;
    height: 65px;
    width: auto;
}

#now_playing_controls{
    color: #303030;
    float: right;
    font-size: 20px;
    height: 65px;    
    line-height: 65px;
    margin-right: 30px;
}

#now_playing_icon{
    color: #303030;
    float: left;
    font-size: 25px;
    line-height: 65px;
    margin-left: 30px;
    padding-right: 10px;
}

#player{
    width: 100%;
}

#timeline{
    background: black;
    color: white;
    float: left;
    height: 25px;
    line-height: 25px;
    margin: 20px;
}
​

http://jsfiddle.net/WCpHh/

提前致谢。

Answer 1

鉴于您只需要支持 Webkit，如您的问题所述，这增加了使用 flex-box 模型的可能性。当然，这仍然处于供应商前缀模式:

#player {
    background-color: #eee;
    padding: 1em;
    text-align: center;
}

#now_playing {
    border: 1px solid #000;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
}

#now_playing_icon {
    display: -webkit-flex-inline;
    -webkit-order: 1;
    -webkit-flex: 1 1 auto;
}

#now_next_container {
    display: -webkit-flex-inline;
    -webkit-flex-direction: column;
    -webkit-order: 2;
    -webkit-flex: 1 1 auto;
}

#timeline {
    color: #f90;
    background-color: #000;
    display: -webkit-flex-inline;
    -webkit-order: 3;
    -webkit-flex: 4 1 auto;
}

#now_playing_controls {
    display: -webkit-flex-inline;
    -webkit-order: 4;
    -webkit-flex: 1 1 auto;
    margin-left: 20px;
}
​

JS Fiddle demo .

这并不完全是“使用剩余空间”，它被明确指示为(我正在……努力解释这一点，因为我才刚刚开始试验)比另一个大四倍同一行中的元素(它的 flex-grow 属性(4 1 auto 中的 4)指示它“增长”四倍。但我认为，鉴于 Chrome 的版本相对较新，它确实可以满足您的需求。

引用资料:

• CSS Flexbox Please! (Flexbox playground/demo) .
• CSS Flexible Box Layout Module (W3.org) .
• 'Using CSS Flexible Boxes' (MDN) .