html - 用百分比宽度整理我的浮动 div

Question

我的问题的核心是这个简单的 css 布局：

左侧设置为float:left，宽度为70%，右侧设置为float:right，宽度为30%。然而，这给我留下了一个空白，他们不像我需要它们那样完全接触：

为了解决这个问题，我可以将百分比更改为70.1% and 30%.这意味着大部分时间差距都消失了，但偶尔右侧会被推到左侧下方，这是不好的！

我尝试将右侧的宽度设置为auto并再次将右侧向下推，但看起来像这样：

然后我试着去掉float:right右边的。哪个几乎可以工作，除了 register_container 一直下降到底部，即使其余的 div（也在右侧内部，但在 register_container 之后列出）按应有的方式坐在右侧：

这是我的 css 的粘贴，这是我临时上传的网站：http: //greenevent.site50.net/index.php

如果有人可以帮助我解决我的问题，那就太好了！（如果不清楚，我希望安排看起来像发布的第一张网站图片，但没有细小的间隙。）

Answer 1

将您切换float: right;到float: left;正确的容器上。您还需要为容器分配宽度。

webkit 浏览器中存在一个错误，这意味着您有时无法获得 100%，这可能会有点痛苦。

http://jsfiddle.net/spacebeers/Lyphr/2/

如果您在 Chrome 的开发工具中将右侧容器的宽度更改为 27%，您将获得所需的布局。

Answer 2

您也可以尝试仅浮动左侧并在右侧留出边距：

​#left
{
   float: left;
   width: 70%;
   background: yellow;
}

#right 
{
   margin-left: 70%;
   background: red;
}

http://jsfiddle.net/2z6KZ/