html - 浮动权利问题

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 中却完全出错了。例子

Answer 1

要在 IE 中获得正确的结果，您可以使用它来代替 float:right。

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

Answer 2

示例 jsBin： http: //jsbin.com/ixebuf/1/（在 IE8、Fx 上测试）（背景放置用于测试目的）

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

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 背景颜色