2

我有以下问题我有.audiojs一个宽度为 100% 的容器 div。在其中有几个具有固定宽度的元素，一个具有动态宽度的元素（.scrubber宽度为 30%）问题是，无论我尝试什么百分比，.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和一个right位置。这些值将是靠近擦洗器的元素的宽度（和边距/填充）的总和。这样，洗涤器的宽度就会变得动态，并将适应包装器的宽度。

像这样的东西： 

.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

做你想做的事情的一种解决方案是calc使用width. 具体来说

width: calc(100%-40px);

其中40px是动态宽度的所有固定宽度兄弟的总宽度。

在 JSFiddle 上查看

请注意，这对 IE 的支持有限，因为它仅适用于 IE9+

于 2013-06-02T14:03:16.777 回答