浮动容器与底部div重叠，但不与顶部div重叠

Question

嗨，我对这个结构还有点不确定。

基本上，我想要有4个div。

<div class="container">
    <div class="top-border"></div>
    <div class="box"></div>
    <div class="bottom-border"></div>
</div>

容器包含了三个较小的div。我的目标是让box div容纳内容，而border div创建一个框在box周围。Border-top将被浮动到左侧，而border-bottom将被浮动到右侧。唯一的问题是容器重叠了底部的括号，但不是顶部。我也不希望它重叠...有没有方法可以解决这个问题？

这里是JsFiddle：http://jsfiddle.net/6ghzN/

- Joe_Maker

Answer 1

在底部边框的div上，更改

margin-top: -40px;

to

margin-bottom: -8px;

- Nick R

---

非常好，谢谢！我之前不知道在这种情况下 margin-top 和 margin-bottom 会有不同的表现。 - Joe_Maker

Answer 2

我会选择另一种方式， 只需添加.box:before和.box:after 这样，您就不需要标记所有这些额外的div！

.container{
    background:#dedede;
    width:80%;
    height:auto;
    float:left;
}
.box{
    height:800px;
    width:100%;
    color:#cecece;
    float:left; 
    position:relative;
}
.box:before{
    content: "";
    width: 40px;
    height: 40px;
    border-left: 8px solid gray;
    border-top: 8px solid gray;
    position: absolute;
    left: -8px;
    top: -8px;
}
.box:after{
    content: "";
    width: 40px;
    height: 40px;
    border-right: 8px solid gray;
    border-bottom: 8px solid gray;
    position: absolute;
    right: -8px;
    bottom: -8px;
}

http://jsfiddle.net/6ghzN/11/

- ntgCleaner

---

请注意，在IE7-中不支持:before和:after伪类。http://caniuse.com/css-gencontent - showdev

我真的很喜欢这个解决方案，但不幸的是，我正在使用的CMS目前不支持伪类。将来一定会记在心里！ - Joe_Maker

Answer 3

我用了这个方法，取得了成功：

1）将容器.container的背景色移除，并添加到.box中。

.box{
    ...
    background:#dedede;   
}

2) 在.top-border的右侧添加负边距，以便.box正确浮动：

.top-border{
    ...
    margin-right:-40px;
}

http://jsfiddle.net/6ghzN/2/

- showdev

Answer 4

在 bottom-border 类中添加 margin-bottom: -10px;。

jsfiddle

- user1853788