Question

以下html和css显示容器内的两个div。左边的div没有浮动;正确的div正好浮动。

右边的div似乎是一个太窄的像素，因此容器的红色背景颜色显示在一个像素间隙中。

HTML

<div class="inner-wrapper">

    <div class="right-sidebar">
        &nbsp;
    </div>

    <div class="content">
        &nbsp;<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;
}

Answer 1

这不是解决问题的浮点数。这是百分比宽度。在FF和IE中，它工作得很完美，但是Chrome会计算百分比宽度，因此并不总是像素总和达到100％。只是尝试轻微改变窗口宽度，你会注意到额外的1像素有时会消失/出现。

如何避免这种行为？你需要以某种方式使用相同的百分比，所以它的计算方法恰好相同。右侧边栏宽度为40％，因此内容div需要有40％的右边距（这40％是包含块元素的40％）

http://jsfiddle.net/XPd9J/1/

.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;
}

Answer 2

获得完整100％的另一个简单选项是将父元素设置为overflow:hidden，将元素设置为width:101%。

Answer 3

我也遇到了这个问题，我在浮动元素的父div中使用了两个选项display:inline-table和display:table-cell。虽然它不是一个表，但我用它作为替代

Answer 4

对于将来参加此活动的任何人，可以使用上述方法创建带有液体浮动的左侧边栏/内容/右侧边栏。可能会这样做：

Container div

右侧边栏宽度：30％;浮动：右侧;边距：0;填充：0;

内容宽度：40％;浮动：右;边距：0;填充：0;

左侧边距 - 右边：70％;边距：0;填充：0;

结束容器div

如果所有容器都有margin：0; padding：0;然后这适用于FF，IE，Chrome，Safari和Opera（最新）没有问题。天才。狡猾的浏览器应该很久以前就解决了这个问题 - 人们只能猜测网页设计师通常不需要像素完美放置侧边栏，否则会给浏览器构建者带来巨大压力。

Answer 5

那里有两个不间断的空间。＆安培; NBSP;字符会导致右侧边栏左侧的1px额外空间。顺便说一下，position: relative在这种情况下是多余的（只有当你必须在IE6中修复某些东西时它才有用。）

Answer 6

设置＆＃34;内包装＆＃34;溢出隐藏（以防万一）。然后在右边div使用calc（40％+ 1px）来解决问题。

铬浮子？ 1px额外填充，但它不填充

6 个答案: