CSS:使两个浮动元素重叠

Question

我在容器中有两个div.一个漂浮在左边,一个漂浮在右边.两者都是容器的大约60%,并且被设计成在中间重叠(右侧优先).

如何使它们重叠而不是像浮动元素一样垂直堆叠？如果我绝对定位正确的元素,则包含的div不会扩展以适合内容.

代码(不幸的是我无法解释这个,因为他们的服务器只读取atm):

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: right;
}

Answer 1

margin-right在左侧框中使用负数,以便允许右侧框重叠:

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
    margin-right:-104px;
}

104像素是重叠量加上4px的边框.

这是一个jsfiddle.