另一个 CSS 重叠问题

Question

更新：这是一个 jsFiddle。

我希望它看起来像这样：

...但它看起来像这样：

#container 水平居中，并且必须保持如此。似乎无法正确理解这一点...

Answer 1

当您并排浮动盒子时，会发生这种情况，一个盒子在左边，另一个在右边，两个盒子的宽度都是宽度：50％。但内边距、边距和边框无意中增加了框的宽度，导致框宽度超过 50%，并迫使右侧框移动到前一个框下方。

尝试为框设置静态宽度（需要计算）

http://jsfiddle.net/fuYYv/

Answer 2

布莱恩唐宁的评论给了我一个线索。

我添加了

footer #container {
    position: relative;
    top: -XXXpx;
}

完美的作品。非常感谢你们这些向导:)

这对其他人应该有用。 jsFiddle 与答案。代码如下：

header, #container, section, footer, footer img#iphone { display: block; }


header {
    background: url('images/header.jpg') repeat-x;
    height: 160px;

    border: 5px solid #aa3;
    color: #aa3;
}
    header img#logo {
        margin: 0 auto;
    }

#container {
    width: 550px;
    margin: 0 auto;

    overflow: hidden;

    border: 5px solid #33a;
    color: #33a;
}

section {
    float: left;    
    width: 310px;
    height: 200px;

    border: 5px solid #3a3;
    color: #3a3;
}

footer {
    background: url('images/footer.jpg') repeat-x;
    height: 150px;

    border: 5px solid #aa3;
    color: #aa3;
}
    footer #container {
        position: relative;
        top: -320px;
    }
    footer img#iphone {
        float: right;    
        height: 400px;
        width: 204px;

        border: 5px solid #a33;
        color: #a33;
    }