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

Question

嘿，我有点不确定这个结构。 本质上我想要一个4个div。

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

该容器容纳三个较小的divs。我的目标是让box div保存内容，边框div在框中创建一个托架。边框顶部将浮动到左侧，边框底部将浮动到右侧。唯一的问题是容器与底部支架重叠，但不是顶部。我不希望它重叠...有没有办法解决这个问题？

这里是一个的jsfiddle：http://jsfiddle.net/6ghzN/

Answer 1

在底边框的div，改变

margin-top: -40px; 

到

margin-bottom: -8px; 

Answer 2

添加margin-bottom: -10px;上下边界类。

1）.container去除背景颜色，并将其添加到.box：

jsfiddle

Answer 3

我用这种方法取得了成功。

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

2）阴性切缘加入的.top-border右侧，这样.box彩车正确：

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

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

Answer 4

我会去一个不同的方式，

只需添加.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/