CSS：使两个浮动元素重叠 [英] CSS: Make two floating elements overlap

问题描述

我在容器中有两个div。一个浮动左，一个浮动右。两者都是容器的大约60％，并且被设计成使得它们在中间重叠（右div具有优先级）。

I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).

如何让它们重叠而不是像浮动元素那样垂直堆叠？如果我absoultely定位正确的元素，包含div不扩展适合的内容。

How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.

代码（不幸的是我不能jsfiddle这，因为他们的服务器是只读atm）：

Code (unfortunately I cannot jsfiddle this as their servers are read only 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;
}

推荐答案

使用负数 margin-right ，以便右边框可以重叠：

Use a negative margin-right on the left box so that the right box is allowed to overlap:

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

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

The 104 pixels is the overlap amount plus 4px for borders.

以下是 jsfiddle 。

这篇关于CSS：使两个浮动元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！