定位，使某些元素占用父div中剩余的空间。
我有以下问题，我有一个宽度为100%的容器div .audiojs。在它里面有几个固定宽度的元素，还有一个动态宽度元素(宽度为30%的.scrubber)，问题是，无论我尝试使用什么百分比的.scrubber，我都无法让它占用容器宽度的其余部分，因为它不会在调整大小时破坏布局。有办法让这件事成功吗？如何强迫.scrubber (加载/进度条)占用.audiojs宽度的其余部分？不破坏布局和其他元素的固定宽度。
JsFiddle：http://jsfiddle.net/w8GEK/3/
<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;
}回答 3
Stack Overflow用户
发布于 2013-06-02 14:23:54
我会做这样的事情：http://jsfiddle.net/GPvLB/1/
我定位了scrubber绝对位置，并给出了一个left和一个right位置。这些值将是洗涤器旁边的元素的宽度(以及边距/填充)的总和。这样，洗涤器的宽度就会变得动态，并适应包装器的宽度。
就像这样：
.audiojs .scrubber {
position: absolute;
background: #232323;
height: 10px;
left: 160px;
right: 60px;
top: 15px;
} 注意，我：
- 相对于包装器添加的位置(用作绝对位置的引用)
- 把你的时间-2向右浮动。
这在所有浏览器中都能正常工作，而且不需要Javascript.
Stack Overflow用户
发布于 2013-06-02 14:06:55
下面是一个如何做到这一点的例子：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>Stack Overflow用户
发布于 2013-06-02 14:03:16
要做您想做的事情的一个解决方案是将calc值用于width。具体来说
width: calc(100%-40px);其中40px是动态宽度的所有固定宽度兄弟姐妹的总宽度。
JSFiddle视图
注意，这限制了IE支持，因为它是只在IE9+中工作的。
https://stackoverflow.com/questions/16883434
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号