Html 定位，使某些元素占据父div中的剩余空间_Html_Css

Html 定位，使某些元素占据父div中的剩余空间

html css

Html 定位，使某些元素占据父div中的剩余空间,html,css,Html,Css,我有以下问题我有一个宽度为100%的容器div.audiojs。在它里面有几个固定宽度的元素和一个动态宽度的元素（.scriber，宽度为30%），问题是，无论我尝试的.scriber的百分比是多少，我都无法让它占据容器宽度的其余部分，这样它就不会在调整大小时弄乱布局。有没有办法让这一切顺利进行？如何强制.scriber（加载/进度条）占据.audiojs宽度的其余部分？没有扭曲的布局和其他元素的固定宽度 JsFiddle： HTML <div class="audiojs">

我有以下问题我有一个宽度为100%的容器div

.audiojs

。在它里面有几个固定宽度的元素和一个动态宽度的元素（

.scriber

，宽度为30%），问题是，无论我尝试的

.scriber

的百分比是多少，我都无法让它占据容器宽度的其余部分，这样它就不会在调整大小时弄乱布局。有没有办法让这一切顺利进行？如何强制

.scriber

（加载/进度条）占据

.audiojs

宽度的其余部分？没有扭曲的布局和其他元素的固定宽度

JsFiddle：

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>

一种解决方案是使用

width

的

calc

值。具体地

width: calc(100%-40px);

其中

40px

是动态宽度的所有固定宽度同级的总宽度

请注意，这限制了IE的支持，因为这是一个如何做到这一点的示例：


.audiojs{溢出：隐藏；}
.固定{宽度：200px；高度：100px；背景：#e7e7e7；浮动：左；边距右：10px；}
.fluid{溢出：隐藏；}
流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div流体div

我会这样做：

我将

洗涤器定位为绝对位置，并将其设置为左
和右
位置。这些值将是洗涤器旁边元素的宽度（和边距/填充）之和。这样，洗涤器的宽度将变得动态，并将适应包装的宽度
大概是这样的：
.audiojs .scrubber { 
    position: absolute; 
    background: #232323; 
    height: 10px; 
    left: 160px;
    right: 60px;
    top: 15px;
} 

请注意，我：

-相对于包装器添加的位置（用作绝对位置的参考）

-让你的时间2向右浮动
这在所有浏览器中都可以正常工作，并且不需要Javascript…我们需要查看您的html和css来回答这个问题。@nFreeze噢，我的天；DD这就是不停编码后发生的事情，完全搞砸了，把它加进去！是的，IE9+是一个缺点；/希望它至少能在IE8中工作不确定我是否正确地实现了它，但它似乎不工作在jsfidle的css中有额外的括号，删除了那些已修复的内容，现在工作正常！谢谢。JSFIDLE倾向于这样做。。。在chrome上对我来说很好，但这可能就是我没有注意到的原因。我在回答中更新了JSFIDLE和链接。
<!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>

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