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

要在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;
}

试试这个。删除背景颜色

浮动权问题

3 个答案: