浮動容器重疊底部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/