以下html和css显示容器内的两个div.左边的div没有浮动;正确的div是浮动的.
右边的div似乎是一个太窄的像素,因此容器的红色背景颜色在一个像素间隙中显示出来.
这是我的问题的简化. http://jsfiddle.net/XPd9J/
HTML
<div class="inner-wrapper">
<div class="right-sidebar">
</div>
<div class="content">
<br /><br />
</div>
</div>
CSS
.inner-wrapper {
position:relative;
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
position:relative;
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
position :relative;
width:60%;
background-color:silver;
margin:0;
padding:0;
}
解决方法
这不是解决问题的浮点数.这是百分比宽度.在FF和IE中,它工作得很完美,但是Chrome会计算百分比宽度,因此并不总是像素总和达到100％.只是尝试轻微改变窗口宽度,你会注意到额外的1像素有时会消失/出现.
如何避免这种行为？你需要以某种方式使用相同的百分比,所以它的计算方法完全相同.右侧边栏宽度为40％,因此内容div需要有40％的右边距(这40％是包含块元素的40％)
.inner-wrapper {
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
background-color:silver;
margin:0 40% 0 0;
padding:0;
}
