CSS的float像素和百分比混合

Question

好吧，我想這一點：

對於這一點，我有這樣的HTML代碼：

<div id="wrapForCenter"> 
    <div id="title"> 
     title 
    </div> 
    <div id="contentFrame"> 
     <div id="imagePlaceholder"> 
      image 
     </div> 
     <div id="content"> 
      content 
     </div> 
    </div>    
    <div id="buttonsBar"> 
     buttonsBar 
    </div>  
</div> 

而且我有這樣的CSS代碼：

#wrapForCenter 
{ 
    position: absolute; 
    top:50%; 
    left: 50%; 
    margin-top: -160px; 
    margin-left: -240px; 
    width: 480px; 
    height: 320px; 
    border: 1px solid black; 
} 

#title 
{   
    width: 100%; 
    height: 40px; 
    background-color: Blue; 
} 

#contentFrame 
{ 
    height: 240px; 
    width: 480px; 
} 

#imagePlaceholder 
{ 
    float: left; 
    width: 100px; 
    height: 100%; 
    background-color: Green; 
} 

#content 
{ 
    float: left; 
    width: 380px; /*<-- look at this*/ 
    height: 100%; 
    background-color: Yellow; 
    overflow: auto; 
} 

#buttonsBar 
{ 
    clear: left; 
    width: 100%; 
    height: 40px;  
    background-color: Silver; 
} 

如果我將內容寬度更改爲100％，爲什麼會發生這種情況？

我SPECT是什麼內容的寬度將是像素contentFrame減去imagePlacehoder寬度，但是當我指定浮動：左兩種，imagePlacehoder和內容，內容得到其父容器寬度。爲什麼？

是否有另一種方式獲得相同的結果，而不使用浮動（也許顯示：內聯）？並使用寬度：100％的內容？

非常感謝。 CSS不是我的長處。

Answer 1

這被稱爲浮動下降。只要每個人都有足夠的空間，漂浮物就可以並排安裝，但如果沒有足夠的空間容納它，漂浮物就會撞到前一個之下。

width:100%意味着它的容量是其容器的100％（#wrapForCenter）。當然，如果你告訴某件東西是容器的整個寬度，那麼任何東西都不能沿着該容器的任何一邊安裝，因此作爲一個浮子，它必須向下移動到它之前的任何位置（早期的「兄弟姐妹」）以適應。

Answer 2

您應該將您的圖像保持器設置爲25％，將您的內容設置爲75％，或者如果您知道爲整個內容區域（圖片和內容）分配了多少空間，則從中減去100並使用很多像素。但總體上這應該工作

#wrapForCenter { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -160px; 
    margin-left: -240px; 
    width: 480px; 
    height: 320px; 
    border: 1px solid black; 
} 

#title {   
    width: 100%; 
    height: 40px; 
    background-color: Blue; 
} 

#contentFrame { 
    height: 240px; 
    width: 480px; 
} 

#imagePlaceholder { 
    float: left; 
    width: 25%; /* See Here */ 
    height: 100%; 
    background-color: Green; 
} 
#content { 
    float:right; 
    width: 75%; /* And here */ 
    height: 100%; 
    background-color:Yellow; 
    } 

Answer 3

一個類似的問題是我自己在stackoverflow之前問的。

How to auto adjust (stretch) div height and width using jQuery or CSS

您可以設置HTML等;

<div id="container"> 
    <div id="top"></div> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="bottom"></div> 
</div> 

而且CSS等;

#container { 
    position: relative; 
    width: 300px; 
    height: 200px; 
} 
#top, #left, #right, #bottom { 
    position: absolute 
} 
#top { 
    top: 0; 
    width: 100%; 
    height: 50px; 
    background: #00b7f0 
} 
#left { 
    top: 50px; 
    width: 50px; 
    bottom: 50px; 
    background: #787878 
} 
#right { 
    top: 50px; 
    left: 50px; 
    right: 0; 
    bottom: 50px; 
    background: #ff7e00 
} 
#bottom { 
    bottom: 0; 
    width: 100%; 
    height: 50px; 
    background: #9dbb61 
} 

Here是工作演示。

希望這有助於..

注：我建議（不強制）你問問題之前做計算器搜索。