創建下2側2周重疊的div並排的div

有2並排div的一條線，第一佔用它需要的空間，後者的剩餘空間（這是一個足夠簡單的內聯塊或浮動）

正確的div應該包含兩個覆蓋的子div，每個取得100％的權利父母（我不能這樣做）。

我的動機是一個帶有標籤（左側）和進度條上的百分比標籤的進度條。進度標籤文本應該居中（這就是爲什麼我需要它採取正確的父母的100％）

如果任何人有任何想法，我很樂意聽到他們。

這裏是我的問題的說明：

<div id="all"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
    </div> 
</div> 

#all { 
    width: 200px; 
    height: 100px; 
    background: grey; 
    border: 1px solid; 
} 

#left { 
    background: red; 
    float: left; 
    height: 100% 
} 

#right { 
    background: blue; 
    display: block; 
    height: 100%; 
}

這裏是它的一個例證的jsfiddle：http://jsfiddle.net/a9cnH/3/

我的問題：我想定位「正確」的DIV中2周的div。每個應該採取100％的正確的股利。如果我對他們使用絕對的比我必須使我的「正確的」div位置而不是「靜態」，但這使它不排列在左邊的div旁邊。

來源

2013-03-08 Marumba

您是否嘗試過搜索[CSS進度條（http://www.google.ca/search?q=css+progress+bar&ie=utf-8&oe = utf-8＆channel = suggest）看看其他人如何處理這個？另外值得注意的是，有一個'progress'元素：https：//developer.mozilla.org/en-US/docs/HTML/Element/progress – cimmanon 2013-03-08 19:54:42

Mozilla進度條在IE10中支持。我正在使用jQuery UI進度條，它們提供了一個進度條頂部的標籤示例，但它們確實給出了百分比，使標籤文本居中。問題是，當文本太長時（即「完成」），對中關閉。我以爲我會使用文本對齊：中心來獲得所需的效果，並使標籤100％。 – Marumba 2013-03-09 15:26:03

如果你想將div放在另一個上面，你需要使用z-index並且完全對齊div。例如：

<div style="border: 1px sold red; width: 300px; height:200px; background-color:White;position:relative;"> 
     <div style="width:50%; height:100%; background-color:Red; z-index:2; float:left; "></div> 
     <div style="width:50%; height:100%; background-color:blue;z-index:2; float:right; "></div> 
     <div style="width:50%; height:50%; background-color:green;z-index:3; top:25%; left:25%; position:absolute; "></div> 
    </div>

來源

2013-03-08 19:53:17 jason

我終於明白了。

我需要左右div都有隱藏溢出。比我可以把正確的div位置相對。

<div id="all"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     <div id="right1"> 
      r1 
     </div> 
     <div id="right2"> 
      r2 
     </div> 
    </div> 
</div> 

#all { 
    width: 200px; 
    height: 100px; 
    background: grey; 
    border: 1px solid; 
} 

#left { 
    background: red; 
    height: 100%; 
    float: left; 
    overflow: hidden; 
} 

#right { 
    background: blue; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

#right1 { 
    width: 100%; 
    background: green; 
    position: absolute; 
} 

#right2 { 
    width: 100%; 
    position: absolute; 
    text-align: center; 
}

這裏它的外觀：http://jsfiddle.net/nSD66/

來源

2013-03-09 16:21:17 Marumba

創建下2側2周重疊的div並排的div

回答

相關問題