css - 问题放置三个div；第三个 div 以某种方式影响整个页面

Question

我连续三个 div 最终将包含三个“小部件”（日历、YouTube 播放列表和音频播客）。当我对前两个 DIV 应用 30% 的宽度时，一切正常，但是当我对第三个 DIV 应用任何宽度时，它会导致整个页面向左移动（绝对位置左：0）。此外，添加到 .widgets 中包含的 DIV 的任何填充似乎都会影响页面。为什么这些 DIV，尤其是第三个 DIV 会造成这么大的麻烦？以及我应该如何实现我在纸上的设计（在 SkyDrive 链接中）？

JSFiddle 用于结果... 用于屏幕截图和线框的 SkyDrive 文件夹

Answer 1

我已根据要求更改了您的一些代码，并查看了更新的Fiddle。

更新的 CSS 代码

.events {
    background: red;
    float:left;
    width:33%;

}
.youtube {
    background: green;
    float:left;
    width:31%;
    margin-left:10px;
    margin-right:10px;

}
.audio {
    background: white;
    float:left;
        width:33%;
}