浮动权利问题答案

【问题标题】：float right issue浮动权利问题
【发布时间】：2013-01-16 19:37:17
【问题描述】：

我想让一个固定大小的 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

【问题讨论】：

你知道左边的容器需要多宽（以像素为单位），还是可变的？
在float:rignt之后尝试clear:both。
你能分享你的<head>部分吗，文档模式是IE5 quirks

标签： html css internet-explorer css-float

【解决方案1】：

示例 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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

试试这个。删除背景颜色

【讨论】：