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

Question

中包含几个子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/

提前致谢。

- user887515

---

我认为没有指定宽度是不可能的，或者至少不跨浏览器。而且没有JavaScript也不行。 - Adrian Ber

不需要兼容所有浏览器，仅限Chrome即可。 - user887515

@user887515你能详细解释一下需求吗？ - Sampath

你具体想知道什么？如果你查看输出，你会看到我想要的 - 黑色div需要在宽度方向上扩展以达到ABC文本div。 - user887515

请检查一下，这是你想要的吗？ - syed mohsin

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演示。

这个不完全是“使用剩余空间”，它被明确指示为（我正在努力解释，因为我刚开始尝试）与同一行中的其他项目相比要大四倍（它的flex-grow属性（在4 1 auto中的4）指示它“增长”四倍。但是，我认为它可以满足您的需求，只要使用相对较新的Chrome版本即可。

参考文献：

• CSS Flexbox Please!（Flexbox playground/demo）。
• CSS Flexible Box Layout Module（W3.org）。
• “使用CSS弹性盒”（MDN）。

- David Thomas

Answer 2

你需要使用Javascript。这个有效。相应的JS如下所示：

$(function() {
    var  $timeline = $('#timeline')
    ,    $nowNext = $('#now_next_container')
    ,    $controls = $('#now_playing_controls')
    ,    adjustTimeline = function() {
         var width = $controls.offset().left - ($nowNext.offset().left + $nowNext.outerWidth())
         width = width - parseInt($timeline.css('margin'), 10)*2
         $timeline.width(width)
    }
    adjustTimeline();
    $(window).on('resize', adjustTimeline);        
});​

- Nathan Kot