浮動右鍵問題

Question

我想讓一個div浮動到一個固定的大小，剩下的空間需要留下。 我曾經做過這樣的流動方式：

HTML：

<div class="container"> 
<div id="rightCntr"> 
</div> 
<div id="leftCntr"> 
</div> 
</div> 

CSS：

#leftCntr { 
float: none; /* not needed, just for clarification */ 
background: #e8f6fe; 
/* the next props are meant to keep this block independent from the other floated one */ 
width: auto; 
overflow: hidden; 
} 

#rightCntr { float: right; width: 213px;} 

這在Firefox和Chrome的工作很好，但在IE8它去都錯了。 Example

Answer 1

例jsBin：http://jsbin.com/ixebuf/1/ （背景放置測試用）（在IE8，外匯測試）

.container { 
    width: 100%; 
    overflow: hidden; 
} 
#rightCntr { 
    float: right; 
    width: 213px; 
    background: gray; 
} 
#leftCntr { 
    margin-right: 213px; 
    background: yellow; 
} 

Answer 2

要在IE中實現正確的結果，您可以使用此代替float：right。

position: absolute; 
    right: 8px; 
    text-align: right; 

Answer 3

#leftCntr { 
    float: left; 

    /* not needed, just for clarification */ 
    background: #e8f6fe; 

    /* the next props are meant to keep this block independent 
    * from the other floated one  
    */ 
    width: 100px; 
    overflow: hidden; 
    height: 100px; 
} 

#rightCntr { 
    float: right; 
    width: 213px; 
    border: 1px solid red; 
    background: red; 
    height: 100px; 
    width: 100px; 
    white-space: nowrap; 
} 

嘗試this.remove背景顏色