3

いくつかのdivが含まれているdivがあります。

これらのどれにも幅がありません。

黒のdivがスペース全体を埋めるようにしたいので、右側のABCdivまで伸びます。

もちろんクロスブラウザはありがたいですが、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のみをサポートする必要があることを考えると、これにより、フレックスボックスモデルを使用する可能性が高まります。もちろん、これはまだベンダープレフィックスモードです。

#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）は、4倍大きくなるように「成長」するように指示します。しかし、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 に答える