html - 让左右浮动重叠而不是堆栈

Question

这比解释更容易显示：http: //jsfiddle.net/gN4VZ/

当两者结合超过容器宽度时，是否可以让我的右浮动内容（蓝色）与我的左浮动内容（红色）重叠而不是堆栈？

Answer 1

您可以使用绝对定位。

代替

float: right

采用：

position: absolute;
right: 0;

而不是

float: left

采用：

position: absolute;
left: 0;

请务必position: relative;在您的 parent上设置，div以便绝对定位相对于它们各自的容器而不是页面。

Answer 2

使用绝对定位并将.box类设置为position:relative.

http://jsfiddle.net/gN4VZ/1/

请注意，我必须在每个上设置一个高度，.box以便它不会重叠顶部/底部。

你的新 CSS 将是

.bar {
    border:solid 1px black;
    color:white;
    position:relative;
    height:40px;
}
.clear {
    clear:both;
}
.left-bar {
    background:red;
    height:40px;
    position:absolute;
    left:0;
}
.right-bar {
    background:blue;
    position:absolute;
    right:0;
    height:40px;
}​

---

正如 My Head Hurts 所建议的那样，您可以只放置正确的位置，这样就不需要外部 div 的高度。

http://jsfiddle.net/gN4VZ/2/