Question

我有一个包含div的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中的4 1 auto）指示它“增长”四倍。但我认为，它符合您的需求，相对最新的Chrome版本。

参考文献：

Answer 2

您需要使用Javascript。 This works。相应的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);        
});

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

2 个答案: