3

我有一个包含 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/

提前致谢。

4

2 回答 2

2

鉴于您只需要支持 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 小提琴演示。

这并没有，确切地说，“使用剩余空间”，它被明确指示（我正在努力解释这一点，因为我才刚刚开始试验）比其他项目大四倍同一行（它的flex-grow属性（4in 4 1 auto）指示它“增长”四倍。但我认为，鉴于 Chrome 的相对最新的化身，它确实可以满足您的需求。

参考：

于 2012-12-22T23:15:16.950 回答
0

您将需要使用 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);        
});​
于 2012-12-22T22:58:59.230 回答