2

次の問題があります.audiojs。幅が 100% のコンテナー div があります。その中には、固定幅の要素がいくつかあり.scrubber、幅が 30% の動的な要素が 1 つ.scrubberあります。サイズ変更時にレイアウトを台無しにしない方法。これを機能させる方法はありますか？(ロード/プログレスバー)を強制的に幅.scrubberの残りの部分を占めるにはどうすればよいですか? .audiojsレイアウトや固定幅の他の要素を台無しにすることなく。

JsFiddle: http://jsfiddle.net/w8GEK/3/

HTML

<div class="audiojs">
    <div class="play-pause"> 
    </div> 

    <div class="volume"> 
    </div> 

    <div class="time"> 
         <em class="played">00:00</em> 
    </div> 

    <div class="scrubber"> 
    </div> 

    <div class="time-2"> 
         <em class="duration">00:00</em> 
    </div> 

</div>

CSS

.audiojs { 
    width: 100%; 
    height: 40px; 
    background: #404040; 
    overflow: hidden; 
    font-family: 'Open Sans';
    font-weight: 300; 
    font-size: 10px; 
}

.audiojs .play-pause, .audiojs .volume { 
    width: 45px; 
    height: 40px; 
    margin: 0px; 
    float: left; 
    overflow: hidden;
    background: #262626;
    border: 1px solid #232323;
    border-bottom: 2px solid #232323;
    border-radius: 2px; 
}

.audiojs .volume {
    margin-left: 12px;
} 

.audiojs .scrubber { 
    position: relative; 
    float: left; 
    width: 30%; 
    background: #232323; 
    height: 10px; 
    margin: 15px 12px; 
    overflow: hidden;
} 

.audiojs .time, time-2 { 
    float: left; 
    height: 40px; 
    line-height: 40px;   
    color: #ddd;  
}

.audiojs .time {
    margin-left: 12px;
} 

.audiojs .time em, .audiojs .time-2 em { 
    color: #f9f9f9; 
    font-style: normal; 
}
4

3 に答える 3

2

私がすることは次のようなものです: http://jsfiddle.net/GPvLB/1/

私はscrubber絶対を配置し、leftそれに a とrightposition の両方を与えました。これらの値は、スクラバーに隣接する要素の幅 (およびマージン/パディング) の合計になります。このようにして、スクラバーの幅が動的になり、ラッパーの幅に適応します。

このようなもの： 

.audiojs .scrubber { 
    position: absolute; 
    background: #232323; 
    height: 10px; 
    left: 160px;
    right: 60px;
    top: 15px;
}

私が注意してください：
- ラッパーに相対的な位置を追加しました（絶対位置の参照として機能するため）
- time-2 を右にフロートしました

これはすべてのブラウザーで正常に動作し、Javascript は必要ありません...

于 2013-06-02T14:23:54.870 に答える
1

これを行う方法の例を次に示します: http://codepen.io/pageaffairs/pen/wzgjy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.audiojs {overflow: hidden;}
.fixed {width: 200px; height: 100px; background: #e7e7e7; float: left; margin-right: 10px;}
.fluid {overflow:hidden;}

</style>

</head>

<body>
<div class="audiojs">
    <div class="fixed"></div>
    <div class="fixed"></div>
    <div class="fixed"></div>
    <div class="fluid">Fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div</div>
</div>

</body>
</html>
于 2013-06-02T14:06:55.180 に答える
0

必要なことを行うための 1 つの解決策は、 のcalc値を使用することですwidth。具体的には

width: calc(100%-40px);

は40px、動的幅の固定幅兄弟すべての合計幅です。

JSFiddleで見る

これはIE9+でのみ動作するため、IE のサポートが限られていることに注意してください。

于 2013-06-02T14:03:16.777 に答える