定位，使某些元素佔據父div的其餘空間

我有以下問題我有一個寬度爲100％的容器div .audiojs。裏面有幾個固定寬度的元素和一個寬度爲30％的寬度的元素（.scrubber，寬度爲30％）問題是，不管我嘗試多少個百分比.scrubber，我都無法讓它佔據容器寬度的其餘部分在某種程度上它不會弄亂調整大小的佈局。有沒有辦法做到這一點？如何強制.scrubber（加載/進度條）佔用其餘的寬度.audiojs？而不用擰緊固定寬度的佈局和其他元素。定位，使某些元素佔據父div的其餘空間

的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; 
}

來源

2013-06-02 Ilja

我們需要看到你的HTML和CSS來回答這個問題。 –

@nFreeze哦，我的; DD這是發生在不停止編碼之後，完全搞砸了，加入了它！ – Ilja

我會做的是一樣的東西這個：http://jsfiddle.net/GPvLB/1/

我定位scrubber abso琵琶，並給它一個left和right的位置。這些值將是接近洗滌器的元素的寬度（和邊距/填充）的總和。這樣洗滌器的寬度就變成動態的並且將適應包裝紙的寬度。

事情是這樣的：

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

需要注意的是我：
- 相對於包裝的添加位置（充當位置絕對參考）
- 浮動的時間-2向右

這應該在所有瀏覽器正常工作，並要求沒有使用Javascript ...

來源

2013-06-02 14:23:54 Pevara

有在jsfidle的CSS中額外的括號，刪除那些修正了一切，現在工作正常！謝謝。 – Ilja

jsFiddle傾向於這樣做...對我來說在Chrome中工作得很好，所以這可能是爲什麼我沒有注意到。我更新了jsfiddle和我的答案中的鏈接。 – Pevara

一個解決方案做你想要使用calc值width什麼。具體地說

width: calc(100%-40px);

其中40px是所有的動態寬度的你的固定寬度的兄弟姐妹的總寬度。

View on JSFiddle

注意，這限制了IE瀏覽器的支持，因爲它only works in IE9+

來源

2013-06-02 14:03:16 jmeas

Yehh，IE9 +是一個缺點; /希望它至少在ie8中工作 – Ilja

這裏是你如何能做到這一點的例子：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-02 14:06:55

不知道我是否正確實現它，但它似乎並不工作http://jsfiddle.net/w8GEK/4/ – Ilja

定位，使某些元素佔據父div的其餘空間

回答

相關問題